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


Tags: css,css3,css-selectors

Problem :

CSS

#columns{
   width:100px; 
}

HTML

<html><body>
  <div id=columns>..1..</div>
  <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!



Solution :

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>

    CSS Howto..

    Links fade in when hovered - how to get them to stay opaque when their target is visible?

    How center an absolute element (img) that's wider than its parent div?

    How to create a two column layout

    How to prevent (bootstrap) fixed top navigation from zooming on mobile

    how to use struts form fields (s:textfield, s:password) and style them using materializecss framework?

    How to override default CSS file location in a Qml Webview?

    How to get the table (datatable) left aligned?

    How to hide show image link on top of another image link

    How to call CSS and JS from a sub-domain - to make loading faster in Magento

    How can I change CSS style definition to make border on specific div

    page breaks and css - how to skip last page?

    How can I delete unused css lines?

    CSS, HTML issue. How would I get the main body of the document to be a certain way down from the top?

    How to hide the button keeping the position? [duplicate]

    How to delete first pseudo after

    How can I create alike css classes [duplicate]

    CSS: On hover show and hide different div's at the same time? [duplicate]

    Show css3 animate for 2 times

    CSS print stylesheet generated content not showing up

    How to write Text in css like show in images?

    How to create desired shapes and position them accordingly using CSS, CSS3?

    How to convert this CSS to SASS (arithmetics in selector)?

    How CSS property “opacity” renders in browsers (IE, Chrome, Firefox, Opera)?

    How to change the color of the active link in the menu

    How to create a full width background image with a variable height depending on content?

    CSS: Background in front of image - how to prevent it?

    How to display a div over other containts of an html page?

    How to put the div at the center with css?

    How to set div using Z-index and fix css

    How to shrink wrap floating content?