Довідник по CSS селекторам
Селектор - від анг. слова select (укр. обрати).
Селектор - це частина CSS-правила, яка повідомляє браузеру, до якого елементу веб-сторінки буде застосований CSS стиль.
Тобто, селектор - це вибірка та формальний опис того елемента чи групи елементів, до яких будуть застосовані CSS стилі.
Селектор | Приклад | Пояснення до прикладу |
---|---|---|
active | a:active | Вибірка активного посилання. |
adjacent | div + p | Обирає елемент |
after | p::after | Додає що-небудь після контенту елемента |
all | * | Обирає всі елементи |
attribute | [target] | Обирає всі елементи, у котрих вказано атрибут target. |
attribute-value | target="_blank" | Обирає всі елементи з target="_blank" |
attribute-value-begin | a[href^="https"] | Обирає всі елементи |
attribute-value-contain | a[href*="w3schools"] | Обирає всі посилання в яких атрибут href містить слово "w3schools". |
attribute-value-contains | [title~=flower] | Обирає всі елементи з атрибутом title в яких міститься слово flower |
attribute-value-end | a[href$=".pdf"] | Обирає всі елементи |
attribute-value-lang | [lang|=en] | Обирає всі елементи з атрибутом lang значенням якого починається з "en". |
before | p::before | Додає що-небудь перед контентом елемента |
checked | input:checked | Обирає кожний елемент |
class | .intro | Вибірка всіх елементів з класом "intro". |
default | input:default | Обирає елемент введення форми, що без задання. |
disabled | input:disabled | Обирає всі вимкнені елементи введення. |
element | p | Обирає всі елементи |
element-child | div > p | Обирає всі елементи |
empty | p:empty | Обирає кожен елемент |
enabled | input:enabled | Обирає всі увімкнені елементи введення. |
first-child | p:first-child | Селектор :first-child обирає всі елементи |
first-letter | p::first-letter | Обирає першу літеру кожного елементу |
first-line | p::first-line | Обирає перший рядок кожного елементу |
first-of-type | p:first-of-type | Обирає елемент |
focus | input:focus | Обирає елемент |
hover | a:hover | Обирає посилання на яке наведено курсор. |
id | #firstname | Вибирає елемент з ідентифікатором id="firstname" |
in-range | input:in-range | Обирає елементи |
inside-element | div p | Обирає всі елементи |
invalid | input:invalid | Обирає всі елементи input зі значенням, що не пройшло перевірки. |
lang | p:lang(it) | Обирає кожен елемент |
last-child | p:last-child | Обирає елемент |
last-of-type | p:last-of-type | Обирає останній елемент свого батька. |
link | a:link | Обирає всі посилання по яким ще не переходили. |
multielement | div, p | Обирає всі елементи |
not | :not(p) | Вибірка елементів, котрі не містять вказаний селектор. |
nth-child | p:nth-child(2) | Обирає елемент |
nth-last-child | p:nth-last-child(2) | Обирає кожен елемент |
nth-last-of-type | p:nth-last-of-type(2) | Обирає кожен елемент |
nth-of-type | p:nth-of-type(2) | Вибирає кожен елемент |
only-child | p:only-child | Вибирає елемент |
only-of-type | p:only-of-type | Обирає кожен елемент |
optional | input:optional | Вибірка елементів |
out-of-range | input:out-of-range | Вибірка всіх |
placeholder | input[type="text"]::placeholder | Змінює стиль підсказки текстового поля |
read-only | input:read-only | Обирає |
read-write | input:read-write | Вибирає |
required | input:required | Вибірка елементів |
root | :root | Вибирає кореневий елемент документа |
selection | ::selection | Вибірка виділеного користувачем тексту. |
sibling | p ~ ul | Обирає всі елементи |
target | #news:target | Обирає поточний активний елемент, що має значення атрибута id="news" |
valid | input:valid | Обирає всі елементи введення з допустим значенням. |
visited | a:visited | Обирає посилання, по яким вже було здійснено перехід |