CSS selector: how to style items [1-2][5-6][9-10] etc by pair


Tags: css,css3,css-selectors

Problem :

I have a list of items, I want style them by group of two, and alternate style between groups. So items [1-2][5-6][9-10] could be { background-color: #C0C0C0 ;} while [3-4][7-8][11-12]... could be { background-color: #FFF ;}.

For a result such:

  1. grey
  2. grey
  3. black
  4. black
  5. grey
  6. grey
  7. black
  8. black
  9. grey
  10. grey
  11. black
  12. black
  13. ...

Which CSS nth-child formula should I use?



Solution :

Working jsFiddle here.


Use :nth-child(4n+3), :nth-child(4n+4)

CSS:

li:nth-child(4n+4), li:nth-child(4n+3) {
  color:red;
}

HTML:

<ul>
    <li>No</li>
    <li>No</li>
    <li>YES</li>
    <li>YES</li>
    <li>No</li>
    <li>No</li>
    <li>YES</li>
    <li>YES</li>
    <li>No</li>
    <li>No</li>
    <li>YES</li>
    <li>YES</li>
</ul>

    CSS Howto..

    How to collapse div same like facebook chat

    How to horizontally and vertically center two images on top of each other?

    CSS: how to position buttons in groups across a row on a web page

    How to display a div's name with jquery and css

    CSS how to align group of elements horizontally?

    How to create a chrome extension using multiple css and js files?

    Rails 3: jquery working to switch view with AJAX, how to get an focused state for the link?

    How to truncate paragragh lines in css [duplicate]

    CSS: How to add classes to existing grid that allow skipping columns on the left side

    how to make 2 fixed-width sidebar div and 1 flexible-width main div?

    How i put css on message of Hibernate validator anotation message of spring project

    How to convert px from photoshop to css

    How to dynamically modify CSS rule set (e.g. with a class selector) from JavaScript within Firefox Add-on using XUL, SDK or WebExtensions techniques?

    How to make CSS column not be forced down

    How do I continue to allow the user to click until a certain point?

    CSS how to position element fixed just for y-axis?

    How to combine html, js and css from fiddle

    How do I make a textarea resize properly when I resize browser window?

    Does HTML5 DOCTYPE affect how CSS3 effects are rendered?

    How do I size an image to fit inside another image? [closed]

    How does Mashable.com displays/hides an element through Css?

    CSS: How do I make text indent for a label with long text?

    How do I scroll d3 elements while keeping a portion of the svg in a fixed position?

    how to resize background image of body in aspx page

    how to center a div in a td cell and a link inside of it ?both vertically and horizontally?

    How to get two CSS rating star widgets to not affect each other when clicked

    How to select an element that has id starting with a digit (css)?

    How to display visual rows and cols in textarea using css

    How to tell the code to choose between two variables and make them equal?

    How do I switch external CSS files?