Розробка, підтримка, SEO, просування, соцмережі та реклама сайтів ☣
Кабінет клієнта
Зареєструватись Забули пароль?
Створення та оптимізація сайтів » Блог » css » Викоритстання :nth-child та :nth-of-type. FAQ

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

Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року. 8-01-2018, 21:58 1 379 0
Викоритстання :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; }

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

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


 
 


Коментарі

⤹ Залишити свій коментар ⤸

  • оновити, якщо не видно коду

Тарифні плани

Потужний старт Стандартний запуск сайту від $400
  • - ♜ -
  • В стартовий тарифний план входить:

  • Розробка та налаштування сайту
  • Семантичне ядро
  • Оптимізація швидкості
  • Наповнення до SEO 5 сторінок
  • Ліцензія двигунчика DLE
Просунутий SEO оптимізований сайт від $700
  • - ♚ -
  • В SEO тарифний план входить:

  • Створення та налаштування сайту
  • Семантичне ядро
  • Оптимізація швидкості
  • Наповнення до SEO 10 сторінок
  • Ліцензія двигунчика DLE
  • 5 силок + перелінковка
Імперський винущувач конкурентів від $999
  • - ♛ -
  • В імперський тарифний план входить:

  • Розробка сайту
  • Наповнення до SEO 20 сторінок
  • Повна оптимізація
  • Ліцензія двигунчика DLE
  • МОЄ НАТХНЕННЯ та ДОСВІД!
/* soc-knopki */