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

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

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

:nth-child - це псевдоклас, який дозволяє вибирати елементи по їх порядковому номеру. Наприклад, можна вибрати третій абзац і застосувати до нього потрібні стилі, або вибрати всі парні рядки в таблиці і зробити її іншого кольору.

Механізм роботи цього селектора добре простежується з вихідної html-розмітки звичайного списку.

- також дивіться приклади селекторів css

Приклад та пояснення:


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; }

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

- продовження з трюками


 
 
 

  786   0
 
Додати
свій
коментар
оновити, якщо не видно коду
 
В роботі:
ПроектПрогресСтатус
Розробка сайту салону манікюра 99%В процесі
Редизайн цього сайту 97%В процесі
Редизайн "Westplast" 100%21.02.18
Просування "Нова Ванна" 100%18.03.18
Darya 1.0 89%09.01.18