Селектори CSS — довідник з прикладами
Селектор - від анг. слова select (укр. обрати).
Селектор - це частина CSS-правила, яка повідомляє браузеру, до якого елементу веб-сторінки буде застосований CSS стиль.
Тобто, селектор - це вибірка та формальний опис того елемента чи групи елементів, до яких будуть застосовані CSS стилі.
| Селектор | Опис |
|---|---|
| * | Вибірка всіх елементів. |
| .class | Найуживаніший селектор: усі елементи із вказаним класом. |
| element | Вибірка конкретного елемента. |
| #id | Єдиний елемент сторінки з указаним id; найважчий зі звичайних селекторів. |
| elemen1t,element2 | Комбінована вибірка елементів. |
| element1+element2 | Елемент, що стоїть ОДРАЗУ після вказаного на тому самому рівні. |
| element1>element2 | Вибірка елемента із вказаним батьком. |
| element1 element2 | Вибірка елемента всередині іншого елемента. |
| element1~element2 | Вибірка всіх наступних елементів. |
| [attribute] | Будь-який елемент, у якого є вказаний атрибут — незалежно від значення. |
| [attribute=value] | Елемент, у якого атрибут дорівнює вказаному значенню повністю. |
| [attribute^=value] | Елемент, у якого атрибут ПОЧИНАЄТЬСЯ з указаного рядка. |
| [attribute*=value] | Елемент, у якого атрибут містить указаний рядок будь-де. |
| [attribute~=value] | Вибірка елемента, якщо атрибут містить вказане слово. |
| [attribute$=value] | Вибірка елемента, якщо значення атрибута закінчується вказаним рядком. |
| [attribute|=value] | Вибірка едемента, що починаються із рядка. Після рядка можу йти тільки дефіз. |
| :active | Стиль, поки елемент натиснуто й кнопку миші ще не відпустили. |
| :any-link | Будь-яке посилання з href — і відвідане, і ні. |
| :focus | Елемент, який зараз отримує ввід: поле, кнопка, посилання. |
| :focus-visible | Фокус, який варто ПОКАЗУВАТИ: з клавіатури — так, після кліку мишею — ні. |
| :focus-within | Елемент, що містить сфокусований елемент (форма з активним полем). |
| :hover | Вибірка посилання на яке наведений курсор. |
| :link | Посилання з атрибутом href, за яким ще не переходили. |
| :modal | Елемент у модальному стані: діалог, відкритий через showModal(). |
| :popover-open | Відкритий popover-елемент. |
| :target | Елемент, чий id збігається з хешем в адресі сторінки. |
| :visited | Посилання, за яким уже переходили; браузер дозволяє змінити лише кольори. |
| :autofill | Поле, заповнене браузером автоматично. |
| :checked | Позначений checkbox, вибраний radio або option. |
| :default | Вибірка елемента форми, що вказаний без задання. |
| :disabled | Поля, вимкнені атрибутом disabled: не приймають введення й не відправляються. |
| :enabled | Вибірка увімкнених елементів. |
| :in-range | Вибірка елементів форми, значення яких знаходиться в межах дозволеного діапазону. |
| :invalid | Поле, вміст якого не проходить перевірку браузера. |
| :optional | Вибірка елементів не обов'язкових до заповнення полів. |
| :out-of-range | Вибірка елементів форми, значення яких вийшло за межі дозволеного діапазону. |
| :placeholder-shown | Поле введення, у якому зараз видно плейсхолдер (тобто порожнє). |
| :read-only | Елемент, який користувач не може редагувати: readonly, disabled або звичайний текст. |
| :read-write | Вибірка елементів форми, що доступні для змін. |
| :required | Поле з атрибутом required — форма без нього не відправиться. |
| :user-invalid | Невалідне поле після взаємодії користувача — не лякає до початку введення. |
| :user-valid | Валідне поле — але лише ПІСЛЯ взаємодії користувача, а не одразу. |
| :valid | Вибірка елементів введення, що пройшли переревірку. |
| :dir(ltr|rtl) | Елементи за напрямком тексту: ltr або rtl. |
| :empty | Елемент, усередині якого немає нічого — навіть пробілу. |
| :first-child | Елемент, який стоїть першим серед дітей свого батька. |
| :first-of-type | Перший серед сусідів ТОГО САМОГО тега, а не перша дитина взагалі. |
| :lang(language) | Вибірка елемента по значенню атрибута lang. |
| :last-child | Елемент, який стоїть останнім серед дітей свого батька. |
| :last-of-type | Останній серед сусідів ТОГО САМОГО тега, навіть якщо після нього є інші елементи. |
| :nth-child(n) | n-та дитина свого батька; приймає формулу an+b, odd і even. |
| :nth-last-child(n) | Те саме, що :nth-child, але лічильник іде з кінця списку. |
| :nth-last-of-type(n) | Обирає елмент по його типу та номеру, починаючи з кінця. |
| :nth-of-type(n) | n-й серед сусідів того самого тега; приймає формулу an+b, odd і even. |
| :only-child | Елемент, у якого немає жодного сусіда. |
| :only-of-type | Вибірка елемента, що є єдиним нащадком свого батька вказаного типу. |
| :root | Кореневий елемент документа; в HTML це , але зі старшою специфічністю. |
| :scope | Точка відліку селектора — у querySelector() це сам елемент. |
| ::after | Псевдоелемент у кінці елемента; існує лише з властивістю content. |
| ::before | Псевдоелемент на початку елемента; існує лише з властивістю content. |
| ::file-selector-button | Кнопка «Огляд» у полі . |
| ::first-letter | Перша літера блоку: буквиця без зайвої розмітки. |
| ::first-line | Перший рядок тексту — той, що вийшов після переносу, а не до нього. |
| ::marker | Маркер пункту списку — крапка чи номер. |
| ::placeholder | Текст-підказка всередині порожнього поля. |
| ::selection | Фрагмент, який користувач виділив мишею або клавіатурою. |
| :has(selector) | Батьківський селектор: вибирає елемент, який МІСТИТЬ щось, що збігається з аргументом. |
| :is(selector) | Збіг із будь-яким селектором зі списку — скорочує довгі переліки. |
| :not(selector) | Обирає все, ОКРІМ того, що збігається з селектором у дужках. |
| :where(selector) | Те саме, що :is(), але з нульовою специфічністю. |
| :defined | Визначені елементи, включно з зареєстрованими кастомними. |
| :host | Хост тіньового DOM — сам кастомний елемент зсередини його стилів. |
| ::part(name) | Частини тіньового DOM, відкриті через атрибут part. |
| ::slotted(selector) | Елементи, вставлені у <slot> тіньового DOM. |