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