Псевдокласи

Оновлено: 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>&nbsp;</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 застосовується до посилань, уже відвіданих користувачем, і задає для них стильове оформлення.