Викоритстання :nth-child та :nth-of-type. FAQ

ul li:first-child { border-top: none; }

- Вибери першій дочірній елемент.

ul > li:last-child {color: green;}

- Вибере останній дочірній елемент.

li:nth-child(4)

- «Вибрати четвертий за рахунком елемент списку»

li:nth-child(2n)

- «Вибрати кожен 2-й елемент списку»

li:nth-child(even)
або
li:nth-child(odd) - аналог - li:nth-child(2n+1)

- «Вибрати всі парні li або непарні»

li:nth-child(3n-1)

 Показать / Скрыть текст

- «Вибрати всі числа по принципу кожне 3 мінус 1»

li:nth-child(n+8)

- «Вибрати всі li починаючи з 8-го включно»

li:nth-child(-n+14)

- «Вибрати всі li з початку по 14 включно»

li:nth-child(n+8):nth-child(-n+14)

- «Вибрати всі li з 8 по 14 включно»

li:nth-child(n+4):nth-child(-n+18):nth-child(odd)

- «Можна комбінувати більше двох виразів. Взяти елементи з 4 по 18 включно і серед них виділити тільки непарні.»

- «Складні комбінації.»

li:nth-child(n+4):nth-child(-n+18):nth-child(odd){
 color:white;background-color:#4BB1CF;}
li:nth-child(n+4):nth-child(-n+18):nth-child(even){
color:white; background-color:#5EB95E;}

 Показать / Скрыть текст

Псевдоклас :nth-of-type

:nth-of-type працює майже так само, як і :nth-child. Різниця полягає в тому, що він враховує тип елемента.

span:nth-of-type(3){color:white; background-color:#4BB1CF;}
strong:nth-of-type(5){color:white;background-color:#5EB95E;}

 Показать / Скрыть текст

 

- «Вибере 3-й спан та 5-й стронг.»

span:nth-of-type(odd)

- «Вибере всі непарні спан.»

Виділити непарні span з перших чотирьох:
span:nth-of-type(odd):nth-of-type(-n+4)

Виділити парні strong з йдуть після четвертого:
strong:nth-of-type(even):nth-of-type(n+5)

 Показать / Скрыть текст

Значення для двох псевдокласів задаються абсолютно однаково. Відмінність полягає в тому, що нумерація елементів при використанні: nth-of-type йде тільки між нащадками одного з батьків заданого типу. Нумерація елементів при використанні: nth-child йде між усіма нащадками одного з батьків.

span:nth-of-type(odd){color:white;background-color:#4BB1CF;}

 Показать / Скрыть текст

span:nth-child(odd){color:white;background-color:#4BB1CF;}

 Показать / Скрыть текст

div p:only-child { color: red; }​

- Вибере тільки той абзац, який являється одиночним в блоці

 приклад

ul > li:only-of-type { font-weight: bold; }

-виберемо ul тільки з одним елементом у списку

ul > li:first-of-type { font-weight: bold; }

-вибирає перший елемент заданого типу.