Список всіх Селекторів у CSS

li a {text-decoration: none; }

Це можна поєднувати з ідентифікаторами та класами: body.opera a{ color:blue; }.

Х > Y

Вибирає елементи Y, які є дочірніми до X . Вибирається лише перший рівень дочірніх елементів.

Приклад:

.parent > li{ border: 1px solid red; }

Додасть відступ liпершого рівня, тобто. тих який є прямим нащадком елемента ul:

<ul class="parent">
	<li> список1
		<ul class="child">
			<li>список11</li>
			<li>список12</li>
		</ul>
	</li><!-- торкнеться -->
	<li>список2</li><!-- торкнеться -->
	<li>список3</li><!-- торкнеться -->
</ul>

Це правило не торкнеться <ul class="child">.

Демо >

Х ~ Y

Вибирає всі елементи Y, які розташовані після X (на тому рівні). За поведінкою схожий на X + Y. Різниця в тому, що будуть вибрані всі наступні елементи, а не лише перший.

Наприклад, у вказаному коді будуть обрані всі елементи p, які розташовані після div:

div ~ p {color: red; }

Пофарбує “текст 2” та “текст 3”:

<div>текст</div>
<p>текст 2</p><!-- color: red; -->
<p>текст 3</p><!-- color: red; -->

Демо →

Х+Y

Вибирає перший елемент Y, який знаходиться після X (не вкладено, а поруч). Стилі будуть застосовуватись лише до останнього елементу X.

Наприклад, наступний код встановлює червоний колір тексту в абзаці p, який розташований відразу після div:

div + p {color: red; }

Отримаємо:

<div>текст</div>
<p>текст 2</p><!-- color: red; -->
<p>текст 3</p>

Демо →

a:link, a:visited, a:hover, a:active, a:focus

Вибирає елементи (зазвичай це поля форми чи посилання) залежно від стану.

• a:link– Вибирає звичайне (не відвідане) посилання. Зазвичай цей селектор записується просто як a.
• a:visited– Вибирає вже відвідане посилання.
• a:hover– Вибирає посилання на яку наведена мишка (під курсором).
• a:active– Вибирає активне посилання (на яке було зроблено клік, поки ще нікуди не клацали або коли на посилання переключилися при пересуванні табом з клавіатури).
• a:focus– Вибирає активне посилання (на яке клікнули, але ще не відпустили кнопку мишки).

a:link { color: red; } /* можна просто а{ } */ /* всі не відвідані посилання */
a:visted { color: purple; } /* всі відвідані посилання */
a:hover { color: green; } /* посилання під курсором */
a:active { color: blue; } /* натиснене посилання */
a:focus { color: dark; } /* посилання в момент натискання */

[attr]

Вибирає елементи, які містять вказаний атрибут . Селектор атрибутів.

a[title] {color: green; }

Пофарбує лише “текст”:

<a href="" title="опис">текст</a>
<a href="">текст 2</a>

[attr = value]

Вибирає елементи, які мають атрибут із зазначеним значенням . Селектор атрибутів із точним значенням.

a[href="http://example.com"] { color: red; }

Пофарбує лише “текст”:

<a href="http://example.com">текст</a><!-- color: red; -->
<a href="http://example.com/article">текст 2</a>

[attr *= value]

Вибирає елементи, у яких у значенні вказаного атрибута зустрічається зазначений підрядок . Селектор атрибутів із плаваючим значенням.

a[href*="example"] { color: red; }

Пофарбує “текст” та “текст 2”:

<a href="http://example.com">текст</a><!-- color: red; -->
<a href="http://example.com/article">текст 2</a><!-- color: red; -->
<a href="http://xxx.ru/article">текст 2</a>

[attr ^= value]

Вибирає елементи, у яких значення атрибута починається із зазначеного рядка . Селектор атрибутів на початку.

a[href^="http"] {
   background: url(path/to/external/icon.png) no-repeat;
   padding-left: 10px;
}

Встановить фонову картинку тільки для тексту:

<a href="http://example.com">текст</a>
<a href="/article">текст 2</a>

[attr $= value]

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

Наприклад, виберіть елементи, які посилаються на файли певного розширення.

a[href$=".jpg"] { color: red; }

Вибере посилання a, які посилаються на зображення формату .jpg. Пофарбує лише “текст”:

<a href="http://example.com/foto.jpg">текст</a>
<a href="http://example.com/foto2.png">текст 2</a>

[attr ~= value]

Вибирає елементи, у яких значення атрибута має вказане слово. Селектор атрибутів з одним із значень розділених пробілом .

Він чимось схожий на *=, різниця ось у чому:

• *=– Шукає home в будь-якому місці значення. Знайде homeland .
• ~=– Шукає home розділений пробілом. Знайде home land .

a[data-info ~= "external"] { color: red; }

a[data-info ~= "image"] { border: 1px solid black; }

Відпрацює так:

<a href="http://example.com" data-info="external">текст</a><!-- забарвить у червоний -->

<a href="http://nettuts.com">текст 2</a><!-- не чіпатиме -->

<a href="http://example.com" data-info="external image">текст 3</a><!-- пофарбує та встановить рамку -->

<a href="http://example.com" data-info="image">текст 4</a><!-- встановить рамку -->

[attr | = value]

Вибирає елементи, у яких значення атрибута дорівнює вказаному рядку або починається з нього .

Приклад: [lang |= ru] – елементи з атрибутом lang, значення якого дорівнює ru або починається з ru- , наприклад “ru-RU”. Але він практично не використовується і його замінює комбінація: [lang=ru], [lang^=ru-] .

:target

Виділяє активний якір у HTML. Допустимо у нас посилання посилається на внутрішній якір <a href="#anchor">на сторінці, тоді при натисканні на це посилання цей селектор виділити елемент має атрибут id="anchor".

: target { color: red; }

Отримаємо:

<a href="#anchor1">Перейти на якір 1</a>
<a href="#anchor2">Перейти на якір 2</a>

<!-- При натисканні на ці посилання вибереться відповідний елемент нижче -->

<p id="anchor1">Елемент 1</p>
<p id="anchor2">Елемент 2</p>

дивіться приклад >

:checked

Стилізує вибрані radio/checkbox. Може використовуватися з тегом input або option або без них: input:checked, option:checkedабо :checked.

Наприклад, наступний код виділяє суцільною чорною рамкою в 1px область біля включеного прапорця:

input[type=radio]:checked { border:1px solid black; }

:default

Вибирає елемент форми, який вважається стандартним елементом. Працює з тегами <button> , <input> , <option> .

<form>
	<input type="submit"><!-- буде обрано -->
	<input type="submit">
	<input type="reset">
</form>

• <option> вважається дефолтним ( :default ), якщо це елемент з атрибутом selected або перший enabled (NOT disabled) елемент у порядку DOM елементів. Для <select multiple> кожен selected елемент вважатиметься дефолтним.

• <input type=”checkbox”> та <input type=”radio”> вважаються дефолтними, якщо вони вибрані (мають атрибут checked ).

• <button> вважається дефолтною, якщо це базова кнопка сабміта форми ( <form> ) – це перша у формі кнопка по порядку DOM елементів. Це також слушно і для типів <input type=”submit”> .

:disabled

Вибирає будь-який disabled (вимкнений) елемент.

Елемент вважається відключеним, коли з ним не можна взаємодіяти (вибрати, клацнути, сфокусуватися, вписати щось тощо). Якщо елемент не disabled, то на ньому стандартно встановлено статус enabled.

Приклади

Встановимо колір фону для всіх відключених полів форми з типом text ::<input type="text">

<form action="#">
	<legend>Shipping address</legend>
	<input type="text" placeholder="Name">
	<input type="text" placeholder="Address">
	<input type="text" placeholder="Zip Code">
</form>

input[type="text"]:disabled {
	background: #dddddd;
}

Встановимо колір фону елементів <select class=”country” disabled> – всі відключені елементи SELECT із класом COUNTRY:

select.country:disabled {
	background: #dddddd;
}

:enabled

Вибирає увімкнений (активний) елемент.

Елемент вважається включений, коли з ним можна взаємодіяти (вибрати, клацнути, сфокусуватися, вписати щось тощо). enabledвключеними елементами вважаються не disabledелементи.

Приклади

Встановимо білий колір фону для всіх активних (enabled) елементів <input>та сірий для всіх неактивних (disabled):

<form action="#">
	<legend>Shipping address</legend>
	<input type="text" placeholder="Name" disabled="disabled">
	<input type="text" placeholder="Address">
	<input type="text" placeholder="Zip Code">
</form>

input[type="text"]:enabled {
	background: #fff;
}

input[type="text"]:disabled {
	background: #dddddd;
}

:empty

Вибирає будь-який пустий елемент. Порожній означає в ньому не повинно бути нічого (ні одного node): ні пробілів, ні тексту, ні інших елементів. HTML коментарі, CSS код не вплинуть на те, що елемент буде вважати не порожнім.

.box {
	background: red;
	height: 200px;
	width: 200px;
}

.box:empty {
	background: lime;
}

<div class="box"><!-- порожній --></div>
<div class="box">Я буду червоним</div>
<div class="box">
	<!-- Я буду червоним, тому що перед коментарем стоять прогалини -->
</div>

::before

X::beforeдодає псевдо-елемент на початок X (всередину тега). Працює разом із властивістю X::before{ content:'' }, що вказує зміст доданого елемента. content потрібно вказувати навіть якщо зміст порожній ( content:''), т.к. елемент повинен хоч щось утримувати.

Наприклад, за допомогою таких стилів, можна вказати значок для LI списку:

li:before {
	content: '-';
	display: inline-block;
	margin-right: .5em;
}

Отримаємо:

• • елемент 1
• • елемент 2

::after

X:afterдодає псевдо-елемент у кінець X (всередину тега). Працювати лише спільно з властивістю X::after{ content:'' }, яка вказує на вміст доданого елемента. content потрібно вказувати навіть якщо зміст порожній ( content:''), т.к. елемент повинен хоч щось утримувати.

Наприклад, за допомогою таких стилів, можна створити блок, який очищатиме всі вищі обтікаючі елементи. Частий прийом у верстці:

.clear:after {
	content: '';
	display: table;
	clear: both;
}

: Focus

Вибирає активний HTML елемент, який знаходиться у фокусі. Зазвичай застосовується до елементів форми. Може застосовуватися до будь-яких елементів перемикання на які можливо з клавіатури або які призначені для введення даних.

У цьому прикладі при переміщенні курсору в полі <input type="text">його фон буде змінено на жовтий:

input:focus {
  background-color: yellow;
}

У цьому прикладі стилі застосовуватися до будь-якого посилання <a>на яку був зроблений клік:

a:focus {
  outline: 2px solid yellow;
}

У цьому прикладі при переміщенні курсору в полі <input type="text">його ширина поступово збільшуватиметься зі 100 до 250 пікселів:

input[type=text] {
  width: 100px;
  transition: ease-in-out, width .35s ease-in-out;
}

input[type=text]:focus {
  width: 250px;
}

:focus-visible

Застосовується, коли елемент відповідає псевдокласу
:focus-within

Вибирає елемент, якщо цей елемент або будь-який із його нащадків сфокусований. Іншими словами, він є елементом, який сам відповідає псевдокласу :focusабо має нащадка, який відповідає :focus. (Включає нащадків у тіньових деревах).

Цей селектор корисний, наприклад, для виділення всього контейнера <form> , коли фокусується користувач на одному з його полів <input> .

Цей приклад вибирає <div> , коли фокусується один із його нащадків:

div:focus-within {
  background: cyan;
}

Ще приклад із формою:

<form>
  <label for="given_name">Given Name:</label>
  <input id="given_name" type="text">
  <br>
  <label for="family_name">Family Name:</label>
  <input id="family_name" type="text">
</form>

form {
  border: 1px solid;
  color: grey;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

input {
  margin: 4px;
}

Підтримка браузерами {percent}

:hover

Спрацьовує при наведенні мишки елемент, коли курсор над елементом. Може застосовуватися до будь – яких елементів ( div, span) як посилань <a>.

У наступному прикладі при наведенні мишкою під посиланням буде з’являтися чорна лінія завтовшки 1px (заміна властивості underline):

a:hover { border-bottom: 1px solid black; }

У наступному коді показано зміну кольору фону при наведенні на елемент <div>:

div:hover { background: #e3e3e3; }

:not(selector)

Вибирає елементи, які містять зазначеного селектора. Замість “selector” може бути будь-який селектор, крім псевдоелементів ( :first-letter). Подвійне заперечення заборонено: :not(:not(...)).

Наступний код вибирає для стилізації всі елементи, крім елемента p:

*: not (p) { color: green; }

У цьому прикладі вибираються всі елементи li, у яких немає класу .last:

ul li: not (. last) { color: blue; }

Вибере “елемент 1” та “елемент 2”:

<ul>
	<li>елемент 1</li>
	<li>елемент 2</li>
	<li class="last">елемент 3</li>
</ul>

::first-line, ::first-letter

• ::first-lineстилізує початковий (перший) рядок.
• ::first-letterстилізує початкову (першу) букву. Змінюються лише шрифт, колір тексту, тло тощо. прив’язаний до багатьох параметрів: ширина вікна браузера, мова, шрифт і т.п.

#1 Вибираємо першу літеру у параграфі

Застосовує ці стилі для всіх початкових літер усіх абзаців у документі.

p::first-letter {
	float: left;
	font-size: 2em;
	font-weight: bold;
	font-family: cursive;
	padding-right:2px;
}

#2 Вибираємо перший рядок в абзаці

Застосовує ці стилі для всіх початкових рядків усіх абзаців у документі.

p::first-line {
	font-weight: bold;
	font-size: 1.2em;
}

:nth-child(n)

X:nth-child(n)вибирає кожен “n-ий” елемент Х, який знаходиться на одному рівні з X. Вважає всі елементи на рівні X (неважливо який у елемента тег, тобто будь-який тип, а не тільки тип X). Під типом мається на увазі саме тег елемента (div, span, li), а чи не його клас чи щось ще.

<h1>Заголовок</h1>
<p>Перший параграф.</p><!-- p:nth-child(2) -->
<p>Другий параграф.</p><!-- p:nth-of-type(2) -->

nможе бути:

• odd– Непарні.
• even– парні.
• число– Порядковий номер з 1.
• выражение с n an+b– a і b цілі числа, n – лічильник від 0 до 999…
• дивитися на прикладі >

n = odd / even

Розфарбуємо парні та непарні параграфи в різні кольори:

p:nth-child(odd) {
	background: red;
}
p:nth-child( even ) {
	background: blue;
}

Отримаємо:

<h1>Заголовок</h1>
<p>Перший параграф.</p><!-- blue -->
<p>Другий пункт.</p><!-- red -->
<p>Третій пункт.</p><!-- blue -->

n = число

Встановить червоним кольором другий елемент:

p:nth-child(2) { color: red; }

Пофарбує “Другий параграф.”:

<h1>Заголовок</h1>
<p>Перший параграф.</p><!-- red -->
<p>Другий пункт.</p>
<p>Третій пункт.</p>

n = вираз

Формула висловлювання: an + b. Де a– це число, яке буде множитися на n– nце лічильник від 0-999, b– це число, відступ.{ an + b; n = 0, 1, 2, ... }

• у селекторі :nth-child(2)вказано лише “а”.
• :nth-child(odd)можна замінити на :nth-child(2n+1)– 1, 3, 5, 7…
• :nth-child(even)можна замінити на :nth-child(2n)– 2, 4, 6, 8…
• :nth-child(3n+4)– 4, 7, 10, 13…
• :first-childможна замінити на :nth-child(0n+1)або:nth-child(1)

дивитися приклад →

Звернемося до кожного третього елемента на поточному рівні, де розташовані p:

p:nth-child(3n) { background: red; }

Отримаємо:

<h1>Заголовок</h1>
<p>Параграф 1</p>
<p>Параграф 2</p><!-- background: red -->
<p>Параграф 3</p>
<p>Параграф 4</p>
<p>Параграф 5</p><!-- background: red -->
<p>Параграф 6</p>
<p>Параграф 7</p>
<p>Параграф 8</p><!-- background: red -->
<p>Параграф 9</p>

:nth-last-child(n)

Вибирає починаючи з кінця. Працює так само як і :nth-child(n)тільки відлік йде не згори (з початку), а знизу (з кінця).

nможе бути:

• odd– Непарні.
• even– парні.
• число– Порядковий номер з 1.
• выражение с n an+b– a і b цілі числа, n – лічильник від 0 до 999…
• дивитися на прикладі >

Наступний код встановить червоним кольором другий з кінця параграф:

li:nth-last-child(2) { color: red; }

Пофарбує “Другий параграф.”:

<h1>Заголовок</h1>
<p>Перший параграф.</p>
<p>Другий пункт.</p><!-- red -->
<p>Третій пункт.</p>

Ще приклади дивіться у попередньому селекторі
:nth-of-type(n)

Вибирає елемент за номером, вказаним у “n”. X:nth-of-typeпочинає відлік від першого елемента типу X, що знаходиться на одному рівні. Під типом мається на увазі саме тег елемента (div, span, li), а чи не його клас.

<h1>Заголовок</h1>
<p>Перший параграф.</p><!-- p:nth-child(2) -->
<p>Другий параграф.</p><!-- p:nth-of-type(2) -->

nможе бути:

• odd– Непарні.
• even– парні.
• число– Порядковий номер з 1.
• выражение с n an+b– a і b цілі числа, n – лічильник від 0 до 999…
• дивитися на прикладі >

# 1 n = add / even

Розфарбуємо парні та непарні параграфи у різні кольори. Вважає саме параграфи без h1, як це робить :nth-child:

p:nth-of-type(odd) { background: red; }
p:nth-of-type(even) { background: blue; }

Отримаємо:

<h1>Заголовок</h1>
<p>Перший параграф.</p><!-- red -->
<p>Другий параграф.</p><!-- blue -->
<p>Третій пункт.</p><!-- red -->

#2 n = число

Встановить червоним кольором другий елемент:

li:nth-of-type(2) { color: red; }

Пофарбує “Другий параграф.”:

<h1>Заголовок</h1>
<p>Перший параграф.</p>
<p>Другий пункт.</p><!-- red -->
<p>Третій пункт.</p>

#3 n = вираз

Формула виразу: an + b, де “a” – число, яке множитиметься на n, “n” – лічильник від 0-999, “b” – число, відступ.{ an + b; n = 0, 1, 2, ... }

• у селекторі :nth-of-type(2)вказано лише “а”.
• :nth-of-type(odd)можна замінити на :nth-of-type(2n+1)– 2, 4, 6, 8…
• :nth-of-type(even)можна замінити на :nth-of-type(2n)– 1, 3, 5, 7…
• :nth-of-type(3n+4)– 4, 7, 10, 13…
• :first-of-typeможна замінити на :nth-of-type(0n+1)або просто:nth-of-type(1)

Наприклад: звернімося до кожного третього елементу p на поточному рівні, де розташовані p:

p:nth-of-type(3n) { background: red; }

Отримаємо:

<h1>Заголовок</h1>
<p>Параграф 1</p>
<p>Параграф 2</p>
<p>Параграф 3</p><!-- background: red -->
<p>Параграф 4</p>
<p>Параграф 5</p>
<p>Параграф 6</p><!-- background: red -->
<p>Параграф 7</p>
<p>Параграф 8</p>
<p>Параграф 9</p><!-- background: red -->

:nth-last-of-type(n)

Вибирає елемент за номером, вказаним у n. X:nth-last-of-type(n)Починає відлік від останнього елемента X, що знаходиться на одному рівні.

Це такий самий селектор як і :nth-of-type(n) тільки вважає навпаки – з кінця.

Наприклад: звернемося до кожного третього елементу p з кінця, на поточному рівні, де розташовані p :

p:nth-last-of-type(3n) { background: red; }

Отримаємо:

<h1>Заголовок</h1>
<p>Параграф 1</p><!-- background: red -->
<p>Параграф 2</p>
<p>Параграф 3</p>
<p>Параграф 4</p><!-- background: red -->
<p>Параграф 5</p>
<p>Параграф 6</p>
<p>Параграф 7</p><!-- background: red -->
<p>Параграф 8</p>
<p>Параграф 9</p>

Ще приклади дивіться у попередньому селекторі
:first-child

X:first-childВибирає перший елемент, який знаходиться на одному рівні з Х. Відлік починається з будь-якого елемента не обов’язково Х.

#1 Приклад: звернімося до першого елемента у блоці#container

#container div:first-child{ color:red; }

Отримаємо:

<div id="container">
	<div>елемент 1</div><!-- color:red; -->
	<div>елемент 2</div>
</div>

А ось так не виділить нічого:

<div id="container">
	<h1>Заголовок</h1>
	<div>елемент 1</div><!-- не виділить -->
	<div>елемент 2</div>
</div>

#2 Обнулення кордону

:first-childіноді використовується для обнулення властивості border на граничних елементах списку. Наступний код обнулює значення верхньої межі елемента li , що є дочірнім по відношенню до елемента ul .

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

:last-child

X:last-childВибирає перший з кінця елемент, який знаходиться на одному рівні з Х. Відлік починається з будь-якого елемента не обов’язково X.

#1 Приклад: звернімося до першого з кінця елемента в блоці#container

#container div:last-child{ color:red; }

Отримаємо:

<div id="container">
	<div>елемент 1</div>
	<div>елемент 2</div><!-- color:red; -->
</div>

А ось так нічого не виділить:

<div id="container">
	<div>елемент 1</div>
	<div>елемент 2</div><!-- не виділить -->
	<p>параграф</p>
</div>

#2 Пофарбуємо останній елемент li у списку ul у зелений:

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

Отримаємо:

<ul>
	<li>список 1</li>
	<li>список 2</li>
	<li>список 3</li><!-- color: green; -->
</ul>

:first-of-type, :last-of-type

Вибирає перший / останній елемент з таким же тегом, що і X, який знаходиться на одному рівні з X. Вважає тільки тегиX .

#1 Приклад: звернімося до першого елемента div у блоці#container

#container div:first-of-type{ color:red; }

Отримаємо:

<div id="container">
	<h1>Заголовок</h1>
	<div>елемент 1</div><!-- color:red; -->
	<div>елемент 2</div>
</div>

#2 Обнулення кордону

:first-of-typeчасто використовується для обнулення властивості border на граничних елементах списку:

ul li:first-of-type { border-top: none; }

Отримаємо:

<ul>
	<span>текст</span>
	<li>елемент 1</li><!-- border-top: none; -->
	<li>елемент 2</li>
	<li>елемент 3</li>
</ul>

:only-child

X:only-childВибирає елемент X, який є єдиним на рівні X. При підрахунку елементів назва тега X НЕ враховується.

Іншими словами: вибирає дочірні елементи X тільки, коли у батька кількість усіх дочірніх елементів (будь-який тип) дорівнює 1.

Виберемо елемент, якщо він єдиний у блоці:

p:only-child { background: red; }

Отримаємо:

<div>
	<p>параграф</p><!-- background: red; -->
</div>

<div>
	<span>параграф</span><!-- не вибере, тому що X=p а не span -->
</div>

<div>
	<p>текст</p><!-- не вибере, тому що на цьому рівні 2 елементи -->
	<span>параграф</span>
</div>

:not(:only-child)

:only-child із запереченням :not() – це комбінація двох псевдо-селекторів.

Це може стати в нагоді, щоб вибрати всі елементи блоку тільки в тому випадку, якщо в цьому блоці більше одного елемента.

li:not(:only-of-type) {
  font-size: 1.25em;
}

У результаті якщо у нас один елемент він не буде обраний:

<ul>
	<li></li><!-- не буде обрано -->
</ul>

А якщо більше одного, то будуть обрані всі:

<ul>
	<li></li><!-- буде обрано -->
	<li></li><!-- буде обрано -->
</ul>

:only-of-type

X:only-of-typeВибирає елемент X, який єдиний лише на рівні X (немає сусідів). Під час підрахунку елементів враховується назва тега X.

Іншими словами: вибирає дочірні елементи X тільки, коли у батька кількість усіх дочірніх елементів типу X дорівнює 1.

Наприклад:

p:only-of-type { background: red; }

Отримаємо:

<div>
	<p>параграф</p><!-- background: red; -->
</div>

<div>
	<span>параграф</span><!-- не виділиться, тому що X=p а не span -->
</div>

<div>
	<span>параграф</span>
	<p>текст</p><!-- background: red; -->
</div>

#1 Виберемо ul лише з одним елементом у списку.

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

Інший варіант: можна ul > li:only-child, тому що зазвичай у списках ul знаходяться тільки теги li.

Трохи практики

#1 Складне виділення

У нас є такий код:

<div>
	<p>параграф</p>
	<ul>
	   <li>Список 1</li>
	   <li>Список 2</li>
	</ul>

	<ul>
	   <li>Список 3</li>
	   <li>Список 4</li>
	</ul>
</div>

Як звернутися до “Списку 2”?

Рішення 1

ul:first-of-type > li:nth-child(2) { font-weight: bold; }

Код знаходить перший список, потім знаходить його прямого спадкоємця і який має порядковий номер у списку дорівнює 2.

Рішення 2

Використання сусідніх селекторів.

p + ul li: last-child { font-weight: bold; }

Браузер знаходить ul, що йде відразу за p, потім знаходить його останній дочірній елемент.

Рішення 3

Це рішення мабуть найправильніше, тому що якщо між ul або li потраплять інші теги, цей приклад все одно вибиратиме потрібний нам li:

ul:first-of-type li:nth-last-of-type(1) { font-weight: bold; }

Браузер вибирає перший ul (саме ul), потім знаходить перший з кінця елемент li (саме li).

Наочний посібник з селекторів типу :nth-child

Щоб швидко і точно зрозуміти як працюють псевдо-селектори типу first-child . Я створив спец. сторінку. Там же можна підібрати потрібний для себе селектор цього типу, під конкретне завдання.

Вважаємо елементи в блоці за допомогою nth-child

Корисна стаття на Хабре – кількісні CSS селектори , вчить рахувати елементи за допомогою nth-child . Наприклад, потрібно виділити перший елемент, тільки якщо в блоці 6 елементів зазначеного типу. Або потрібно виділити всі елементи блоку, якщо в блоці всього 6 елементів.

Декілька прикладів без пояснень:

Перший елемент, тільки якщо всього їх 6:

li:nth-last-child(6):first-child {
  color: tomato;
}

Всі елементи в блоці, тільки якщо всього їх 6:

li:nth-last-child(6):first-child,
li:nth-last-child(6):first-child ~ li {
  color: tomato;
}

Використовуючи зворотний до :nth-child(n+6)селекту :nth-last-child(n+6)ми зможемо виділити всі елементи «від шостого з кінця до самого першого з початку».

Всі елементи, крім 5 останніх, тільки якщо всього в блоці 6 або більше елементів:

li:nth-last-child(n+6) {
  color: tomato;
}

Всі елементи тільки якщо всього в блоці 6 або більше елементів:

li:nth-last-child(n+6),
li:nth-last-child(n+6) ~ li {
  color: tomato;
}

Всі елементи тільки якщо всього в блоці 6 або менше елементів:

li:nth-last-child(-n+6):first-child,
li:nth-last-child(-n+6):first-child ~ li {
  color: tomato;
}

Всі елементи вказаного тега (p), тільки якщо всього в блоці 6 або більше елементів цього тегу (p):

p:nth-last-of-type(n+6),
p:nth-last-of-type(n+6) ~ p {
  color: tomato;
}

Вибір діапазону елементів

Допустимо, у вас є список з 20 елементів і потрібно вибрати елементи з 7 по 14 включно. Це можна зробити так:

ol li:nth-child(n+7):nth-child(-n+14) {
  background: lightpink;
}