Довідник по CSS селекторам

Селектор - від анг. слова select (укр. обрати).

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

Тобто, селектор - це вибірка та формальний опис того елемента чи групи елементів, до яких будуть застосовані CSS стилі.


Селектор Приклад Пояснення до прикладу
active a:active

Вибірка активного посилання.

adjacent div + p

Обирає елемент <p> який розташовується одразу за елементам <div>.

after p::after

Додає що-небудь після контенту елемента <p>

all *

Обирає всі елементи

attribute [target]

Обирає всі елементи, у котрих вказано атрибут target.

attribute-value target="_blank"

Обирає всі елементи з target="_blank"

attribute-value-begin a[href^="https"]

Обирає всі елементи <a> в яких значення атрибута href починається з "https".

attribute-value-contain a[href*="w3schools"]

Обирає всі посилання в яких атрибут href містить слово "w3schools".

attribute-value-contains [title~=flower]

Обирає всі елементи з атрибутом title в яких міститься слово flower

attribute-value-end a[href$=".pdf"]

Обирає всі елементи <a> в яких значення атрибута href закінчується рядком ".pdf"

attribute-value-lang [lang|=en]

Обирає всі елементи з атрибутом lang значенням якого починається з "en".

before p::before

Додає що-небудь перед контентом елемента <p>

checked input:checked

Обирає кожний елемент <input> який має значенняі checked.

class .intro

Вибірка всіх елементів з класом "intro".

default input:default

Обирає елемент введення форми, що без задання.

disabled input:disabled

Обирає всі вимкнені елементи введення.

element p

Обирає всі елементи <p>.

element-child div > p

Обирає всі елементи <p> для яких батьківським елементом є елемент <div>.

empty p:empty

Обирає кожен елемент <p> без тексту та інших HTML елементів.

enabled input:enabled

Обирає всі увімкнені елементи введення.

first-child p:first-child

Селектор :first-child обирає всі елементи <p>, які є першим нащадком свого батька.

first-letter p::first-letter

Обирає першу літеру кожного елементу <p>.

first-line p::first-line

Обирає перший рядок кожного елементу <p>

first-of-type p:first-of-type

Обирає елемент <p>, якщо він перший елемент свого батька.

focus input:focus

Обирає елемент <input>, який є у фокусі

hover a:hover

Обирає посилання на яке наведено курсор.

id #firstname

Вибирає елемент з ідентифікатором id="firstname"

in-range input:in-range

Обирає елементи <input> із значенням, що знаходяться в дозволеному діапазоні.

inside-element div p

Обирає всі елементи <p> в елементі <div>

invalid input:invalid

Обирає всі елементи input зі значенням, що не пройшло перевірки.

lang p:lang(it)

Обирає кожен елемент <p> з атрибутом lang у значенні "it" (Italian)

last-child p:last-child

Обирає елемент <p>, який є останнім нащадком свого батька.

last-of-type p:last-of-type

Обирає останній елемент свого батька.

link a:link

Обирає всі посилання по яким ще не переходили.

multielement div, p

Обирає всі елементи <div> і всі елементи <p>.

not :not(p)

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

nth-child p:nth-child(2)

Обирає елемент <p>, якщо він другий елемент свого батька.

nth-last-child p:nth-last-child(2)

Обирає кожен елемент <p>, що є другим нащадком свого батька починаючи відлік з кінця.

nth-last-of-type p:nth-last-of-type(2)

Обирає кожен елемент <p>, що є другим елементом <p> свого батька з кінця.

nth-of-type p:nth-of-type(2)

Вибирає кожен елемент <p>, що є другим <p> елемент свого батька.

only-child p:only-child

Вибирає елемент <p>, якщо він є єдиним нащадком свого батька.

only-of-type p:only-of-type

Обирає кожен елемент <p>, що є єдиним елементом <p> такого типу свого батька.

optional input:optional

Вибірка елементів <input>, що без атрибута "required".

out-of-range input:out-of-range

Вибірка всіх <input> елементів у котрих введене значення вийшло за межі дозволеного діапазону.

placeholder input[type="text"]::placeholder

Змінює стиль підсказки текстового поля <input>.!

read-only input:read-only

Обирає <input> елементи, котрі з атрибутом "readonly".

read-write input:read-write

Вибирає <input> елементи у яких не вказаний "readonly" атрибут.

required input:required

Вибірка елементів <input>, що обов'язкові для заповнення.

root :root

Вибирає кореневий елемент документа

selection ::selection

Вибірка виділеного користувачем тексту.

sibling p ~ ul

Обирає всі елементи <ul> які розташовані після елементом <p>

target #news:target

Обирає поточний активний елемент, що має значення атрибута id="news"

valid input:valid

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

visited a:visited

Обирає посилання, по яким вже було здійснено перехід