Псевдокласи
Оновлено: 20.01.2023
Псевдокласи
Псевдокласи визначають динамічний стан елементів, який змінюється за допомогою дій користувача, а також положення в дереві документа. Прикладом такого стану слугує текстове посилання, яке змінює свій колір під час наведення на нього курсору миші.
-
Псевдоклас :active
Псевдоклас :active
Псевдоклас :active визначає стиль активного елемента. Це такий стан елемента, який відбувається між клацанням і відпусканням клавіші миші. Здебільшого застосовується до посилань і кнопок, але ними не обмежений.
-
Псевдоклас :blank
Псевдоклас :blank
Псевдоклас :blank представляє порожні елементи, іншими словами такі, що не містять дочірніх елементів або тексту. За своєю дією схожий на :empty, але :blank, на відміну від нього, вважає порожніми елементи, що містять пробіл або перенесення рядків.
-
Псевдоклас :checked
Псевдоклас :checked
Псевдоклас :checked застосовується до елементів інтерфейсу, таких як перемикачі (checkbox), прапорці (radio) і пункти списку (option), коли вони перебувають у положенні "увімкнено". Перемикання елементів у такий стан відбувається за допомогою атрибута checked елемента <input> або користувачем.
-
Псевдоклас :default
Псевдоклас :default
Псевдоклас :default застосовує стиль до елементів форм, які встановлені за замовчуванням у групі схожих елементів. Наприклад, у нас може бути дві кнопки для надсилання даних форми на сервер. Одна з цих кнопок задана за замовчуванням, ми можемо змінити її стиль через :default.
-
Псевдоклас :disabled
Псевдоклас :disabled
Псевдоклас :disabled використовується для застосування стилю до заблокованих елементів форм. Такі елементи не можуть отримати фокус, бути натиснутими або активованими, у текстових полях не можна набирати текст.
-
Псевдоклас :empty
Псевдоклас :empty
Псевдоклас :empty представляє порожні елементи, іншими словами такі, що не містять дочірніх елементів, тексту, пробілів або переносів рядків. Наприклад, <p></p> є порожнім елементом, а <p> </p>, <p> </p> або <p>еге</p> вже ні.
-
Псевдоклас :enabled
Псевдоклас :enabled
Псевдоклас :enabled використовується для застосування стилю до доступних (не заблокованих) елементів форм. За замовчуванням, усі елементи форм є доступними, якщо в коді HTML до них не додається атрибут disabled.
-
Псевдоклас :first-child
Псевдоклас :first-child
Псевдоклас :first-child задає стиль першого елемента в групі братніх елементів (які мають один батьківський елемент).
-
Псевдоклас :first-of-type
Псевдоклас :first-of-type
Псевдоклас :first-of-type задає стиль першого елемента певного типу в групі братніх елементів (що мають один батьківський елемент).
-
Псевдоклас :focus
Псевдоклас :focus
Псевдоклас :focus визначає стиль для елемента, який отримує фокус. Наприклад, ним може бути текстове поле форми, у яке встановлюється курсор.
-
Псевдоклас :focus-within
Псевдоклас :focus-within
Псевдоклас :focus-within визначає стиль елемента, коли він сам або елементи всередині нього отримують фокус. На відміну від :focus, який застосовується безпосередньо до самого елемента, :focus-within працює для батьківського елемента. Це дає змогу виділяти кольором або іншими методами всю форму або окремі її частини, коли користувач працює з полями форми.
-
Псевдоклас :fullscreen
Псевдоклас :fullscreen
Псевдоклас :fullscreen застосовується до елементів, коли браузер перебуває в повноекранному режимі. При цьому приховується заголовок вікна, адресний рядок, вкладки, меню та інші стандартні елементи і браузер відображається на весь екран. Для переходу зі стандартного режиму в повноекранний і назад зазвичай застосовується клавіша F11.
-
Псевдоклас :hover
Псевдоклас :hover
Визначає стиль елемента під час наведення на нього курсору миші, але водночас елемент ще не активований, іншими словами, кнопка миші не натиснута.
-
Псевдоклас :in-range
Псевдоклас :in-range
Застосовується до елементів форм, у яких введене користувачем значення знаходиться в заздалегідь заданому діапазоні. Сам діапазон встановлюється за допомогою атрибутів min і max, вони, відповідно, задають мінімальне і максимальне значення.
-
Псевдоклас :indeterminate
Псевдоклас :indeterminate
Псевдоклас :indeterminate задає стиль для перемикачів, коли вони перебувають у невизначеному стані. Наприклад, якщо жоден перемикач не позначений, то вони перебувають у зазначеному стані. У реальності, стиль застосовується тільки до елементів, у яких DOM-атрибут :indeterminate через JavaScript встановлений у значення true. Також цей псевдоклас використовується деякими браузерами для елемента <progress>.
-
Псевдоклас :invalid
Псевдоклас :invalid
Застосовується до полів форми, вміст яких не відповідає зазначеному типу. Наприклад, для type="number" має вводитися число, а не букви, для type="email" коректна адреса електронної пошти.
-
Псевдоклас :lang
Псевдоклас :lang
Визначає мову, яка використовується в документі або його фрагменті. За допомогою псевдокласу :lang можна задавати певні налаштування, характерні для різних мов, наприклад, вид лапок у цитатах.
-
Псевдоклас :last-child
Псевдоклас :last-child
Псевдоклас :last-child задає стиль останнього елемента в групі братніх елементів (що мають один батьківський елемент).
-
Псевдоклас :last-of-type
Псевдоклас :last-of-type
Псевдоклас :last-of-type задає стиль останнього елемента певного типу в групі братніх елементів (що мають один батьківський елемент).
-
Псевдоклас :link
Псевдоклас :link
Псевдоклас :link застосовується до посилань, які ще не відвідувалися користувачем, і задає для них стильове оформлення.
-
Псевдоклас :not
Псевдоклас :not
Псевдоклас :not задає правила стилів для елементів, які не містять зазначений селектор.
-
Псевдокласс :nth-child
Псевдокласс :nth-child
Псевдоклас :nth-child використовується для додавання стилю до елементів на основі нумерації в дереві елементів.
-
Псевдоклас :nth-last-child
Псевдоклас :nth-last-child
Псевдоклас :nth-last-child використовується для додавання стилю до елементів на основі нумерації в дереві елементів. На відміну від псевдокласу :nth-child відлік ведеться не від першого елемента, а від останнього.
-
Псевдоклас :nth-last-of-type
Псевдоклас :nth-last-of-type
Псевдоклас: nth-last-of-type використовується для додавання стилю до елементів зазначеного типу на основі нумерації в дереві елементів. На відміну від псевдокласу :nth-of-type відлік ведеться не від першого елемента, а від останнього.
-
Псевдоклас :nth-of-type
Псевдоклас :nth-of-type
Псевдоклас :nth-of-type використовується для додавання стилю до елементів зазначеного типу на основі нумерації в дереві елементів.
-
Псевдоклас :only-child
Псевдоклас :only-child
Псевдоклас :only-child застосовується до дочірнього елемента, тільки якщо він є єдиним у батьківського елемента.
-
Псевдоклас :only-of-type
Псевдоклас :only-of-type
Псевдоклас :only-of-type застосовується до дочірнього елемента зазначеного типу, тільки якщо він єдиний у батьківського елемента.
-
Псевдоклас :optional
Псевдоклас :optional
Застосовує стильові правила до елемента <input>, у якого не задано атрибут required, він дає змогу виділяти поля, обов'язкові до заповнення перед відправленням форми. Таким чином :optional застосовується до необов'язкових полів форми.
-
Псевдокласс :out-of-range
Псевдокласс :out-of-range
Застосовується до полів форм, у яких введене користувачем значення виходить із заданого діапазону. Псевдоклас працює тільки для тих полів, де користувач може сам ввести значення, навіть незважаючи на обмеження, накладені атрибутами min і max.
-
Псевдоклас :placeholder-shown
Псевдоклас :placeholder-shown
Визначає стиль елемента <input> або <textarea>, який наразі відображає текст підказки, заданої атрибутом placeholder. Така підказка зазвичай зникає під час набору тексту.
-
Псевдоклас :read-only
Псевдоклас :read-only
Застосовується до полів форми, у яких задано атрибут readonly. Таке поле не може бути модифіковане, водночас воно отримує фокус, а дані в такому полі можна виділити і скопіювати.
-
Псевдоклас :read-write
Псевдоклас :read-write
Застосовується до полів форми, доступних для зміни. Псевдоклас :read-write є протилежним за своєю дією :read-only, який застосовується до полів з атрибутом readonly (тільки для читання).
-
Псевдоклас :required
Псевдоклас :required
Застосовує стильові правила до елемента <input>, у якого встановлений атрибут required, він дає змогу виділяти поля обов'язкові до заповнення перед відправленням форми.
-
Псевдоклас :target
Псевдоклас :target
Для переходу до обраного фрагмента документа, в адресі пишеться символ # і вказується ім'я ідентифікатора. Наприклад, в адресі http://www.w3.org/TR/css3-selectors/#target-pseudo відбувається перехід до елемента, атрибут id якого задано як target-pseudo. Такий запис адреси називається "цільовий елемент". Псевдоклас :target застосовується до цільового елемента, іншими словами, до ідентифікатора, який вказано в адресному рядку браузера.
-
Псевдоклас :valid
Псевдоклас :valid
Застосовується до полів форми, вміст яких проходить перевірку в браузері на відповідність зазначеному типу. Наприклад, для type="number" вводиться число, а не букви, для type="email" коректна адреса електронної пошти.
-
Псевдоклас :visited
Псевдоклас :visited
Псевдоклас :visited застосовується до посилань, уже відвіданих користувачем, і задає для них стильове оформлення.