CSS Selector: How to Style Items [1-2][5-6][9-10] etc by Pair

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

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>

Select nth child select 1, 2, 5, 6, 9, 10 etc

If I understood you correctly, you want to select:

1 2 3 4 5 6 7 8 9 10 ...
+ +     + +     +  + ...

For that you can use:

.selector>div:nth-child(4n+1), .selector>div:nth-child(4n+2){    background-color:red;}

<div class="selector">    <div>1</div>    <div>2</div>    <div>3</div>    <div>4</div>    <div>5</div>    <div>6</div>    <div>7</div>    <div>8</div>    <div>9</div>    <div>10</div></div>

select multiple child in css

You can separate the classes with a comma ,

.ListTaskTime tbody tr >td:nth-child(3), 
.ListTaskTime tbody tr >td:nth-child(6),
.ListTaskTime tbody tr >td:nth-child(9) {
    /* Common Styles Goes Here, Styles will apply to child 3,6 and 9 */
}

Note: You need to check the nth-child and define it manually in your stylesheet, as CSS cannot decide it for you if columns increase.

If you are using a server side language for generating a dynamic table, you can use functions like substr() to cut down the letters.

Side note : You don't have to use > unless and until you don't have any child table, this is sufficient.. tbody tr td:nth-child(3)

nth-child for every two table rows

Realize that you are doing groups of 4, then you can see that you can have every 4th element and every 4th element minus one being white, then every 4th element minus two, or every 4th element minus 3 being grey.

So, you'd use 4n and 4n-1, then 4n-2 and 4n-3:

div:nth-child(4n), div:nth-child(4n-1) {
    background: red;
}
div:nth-child(4n-2), div:nth-child(4n-3) {
    background: blue;
}

That code isn't precise to your case, I wrote it for a jsFiddle proof-of-concept.

NB disclaimer: Keep in mind that nth-child does not work in IE8. Typical issue, of course.

Select doubles using nth-child() in CSS3

ul li:nth-child(4n+1),
ul li:nth-child(4n+2) {
  background: #CCC;
}
ul li:nth-child(4n+3),
ul li:nth-child(4n+4) {
  background: #DDD;
}

This will give you every 4th element starting with the 1st, and 2nd as color #CCC and every 4th element starting with the 3rd and 4th as #DDD

jsfiddle here: http://jsfiddle.net/mU2tn/1/

CSS even odd for every other odd div in class

:nth-child(4n) gives us 0, 4, 8, etc.

Since you want 1, 5, 9, you should try :nth-child(4n + 1)

What's the difference between UTF-8 and UTF-8 with BOM?

The UTF-8 BOM is a sequence of bytes at the start of a text stream (0xEF, 0xBB, 0xBF) that allows the reader to more reliably guess a file as being encoded in UTF-8.

Normally, the BOM is used to signal the endianness of an encoding, but since endianness is irrelevant to UTF-8, the BOM is unnecessary.

According to the Unicode standard, the BOM for UTF-8 files is not recommended:

2.6 Encoding Schemes

... Use of a BOM is neither required nor recommended for UTF-8, but may be encountered in contexts where UTF-8 data is converted from other encoding forms that use a BOM or where the BOM is used as a UTF-8 signature. See the “Byte Order Mark” subsection in Section 16.8, Specials, for more information.

CSS Selector: How to Style Items [1-2][5-6][9-10] etc by Pair