How to access specific <ul> items with :Nth-Child()?

Question

How can I access items from 2 to 2 in my list using the :Nth-Child() parameter or if it gets easier, access and customize even items?

Answer 1

You can your pseudo selector nth-child adding the odd or even rule (odd or 2n+1 and even or 2n) to customize the elements.

To customize even items would look:

li:nth-child(even) {
    // Seus estilos
}

Or else:

li:nth-child(2n) {
    // Seus estilos
}

I have prepared a Jsfiddle to observe this behavior: http://jsfiddle.net/6428n8zm/

Take a look at the documentation of this pseudo-selecto to see all possible combinations you can make: https://developer.mozilla.org/en-US/docs/Web/CSS/:Nth-Child.

Answer 2

To customize only the even items you would use the following pseudo-selector,

li:nth-child(even){} ou li:nth-child(2n){}

To customize only the odd items you would use this other,

li:nth-child(odd){} ou li:nth-child(2n+1){}

The function that the pseudo-selector nth-child accepted is An+B (being An or B optional), as well as?

When you put the value of (2n+1), automatically CSS does the calculation, let’s say n assumed the value of 0 (zero), thus (2 * 0 + 1) = 1 (two times zero equals zero, the result plus one equals one), so it would apply the declared styles to the first item in its list, then the n is incremented and has the value of 1 (one), soon (2 * 1 + 1) = 3 (two times one is equal to two, the result plus one is equal to three), then he would apply the declared styles to the third item of his list and so on, so the formula (2n+1) selects the odd elements.

Already the formula (2n) will do the same process, only without the sum. On the first run the n takes on the value of 0 (zero), then the calculation is made: (2 * 0) = 0 (two times zero equals zero), since there is no zero item in the list, this value is disregarded and the n is increased to be worth 1 (one), soon (2 * 1) = 2 (two times one is equal to two), so the declared styles are applied to item two of your list and so on, because it is not added 1 to the result of multiplication, the final value will always be an even number, causing the formula (2n) only select even elements.

See that for the formula (2n) I omitted the element B function. All two elements are optional, so I can omit the element An function and simply state the element B, as follows: li:nth-child(5){}, as in this selector there is no calculation to be made, so the declared styles are applied to the number item you declared, in this case only the item 5 will be stylized.