How to define exceptions for the Third occurence of a DIV?
CSS
#columns{
width:100px;
}
HTML
<html><body>
<div id=columns>..1..</d开发者_开发问答iv>
<div id=columns>..2..</div>
<div id=columns>..3..</div>
<div id=columns>..4..</div>
<div id=columns>..5..</div>
<div id=columns>..6..</div>
</body></html>
Now, imagine that I want to define in CSS3, a specific rule to make an exception for the Third and Sixth div, which I want to make 50px. is there another way ( besode making a new div name, obviously, as I want to make things elegant and have all of them use the exact same div ID.
Any suggestions to how to solve this are very appreciated. Thanks!
For browsers which support the CSS3 nth-child pseudo-class:
<style type="text/css">
div > div {
width: 100px;
}
div:nth-child(3), div:nth-child(6) {
width: 50px;
}
</style>
HTML:
<div>
<div>..1..</div>
<div>..2..</div>
<div>..3..</div>
<div>..4..</div>
<div>..5..</div>
<div>..6..</div>
</div>
:nth-child()
http://jsfiddle.net/tRbWP/
Use the nth-child pseudo class, with 0n so it picks a child without grouping.
div:nth-child(3), div:nth-child(6) { width: 50px; }
加载中,请稍侯......
精彩评论