How to define exceptions for the Third occurence of a DIV?_问答_开发者

How to define exceptions for the Third occurence of a DIV?

开发者 https://www.devze.com 2023-02-19 22:49 出处：网络

CSS #columns{ width:100px; } HTML <html><body> <div id=columns>..1..</d开发者_开发问答iv>

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; }

How to define exceptions for the Third occurence of a DIV?

精彩评论

关注公众号

热门标签

图文推荐

How to define exceptions for the Third occurence of a DIV?

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：