Псевдокласи css, Vaden Pro

Псевдокласи CSS дозволяють нам змінювати оформлення окремих частин сторінки залежно від їхнього стану.

Насправді це виглядає немов у елемента, за певних умов (наприклад при наведенні миші) з'являється клас, що дозволяє йому змінити своє оформлення.

Не варто плутати селектори псевдокласів із селекторами псевдоелементів.

Як користуватися селекторами псевдокласів CSS?

Основне завдання селектора - вибір всіх елементів із структури документа, що підпадають під певні характеристики. У нашому випадку стан яких відповідає специфікації певних псевдокласів.

Задається він як двокрапка поле якого йде назва застосовуваного псевдокласу. Так, для зміни кольору фону кнопки відправки форми при наведенні миші ми будемо використовувати таку конструкцію:

До одного елемента можна застосовувати одночасно кілька таких селекторів. Оформлення елементів задане таким чином застосовуватиметься лише у разі збігу всіх умов активації перерахованих псевдокласів CSS.

Наприклад, змінимо розмір шрифту першого елемента списку при наведенні:

Подібні прийоми в роботі з CSS дозволяють скоротити HTML код і зменшити час на верстку сторінки в цілому.

Класифікація псевдокласів CSS

Динамічні псевдокласи

:hover - виділяє елемент на який наведено курсор миші.
:active – використовується для активного елемента. Активним вважається елемент під час натискання. Зазвичай використовується для зміни кольору посилання при натисканні на ній.
:focus – виділяє елемент у якому встановлено фокус ( наприклад курсор у текстовому полі форми).

Псевдокласи посилань

Псевдокласи форм

:read-only – виділяє елемент форми у якого є атрибут readonly (забороняє зміна або вибір даного елемента форми). Ми можемо зробити такі поля, наприклад, напівпрозорими, щоб у користувачів не виникало бажання клікнути на них.
:read-write - зворотний :read-only селектор. Застосовується до елементів доступних для вибору та зміни.
:disabled – застосовується для форматування елементів форм з атрибутом disabled (забороняє натискання, виділення тощо елементів форми). Схожий із попереднім класом.
:enabled - антипод :disabled. Вибере всі доступні елементи форми. За промовчанням доступні всі елементи. Недоступними вони стають тільки після прописування атрибуту у них disabled.
::-moz-placeholder – застосовується до елементів форми з атрибутом placeholder. Працює у браузері firefox і дозволяє змінювати зовнішній вигляд тексту (шрифт, колір тощо)
::-webkit-input-placeholder – аналогічний попередньому псевдокласу, тільки цього разу працює у crome та safari.
:checked – застосовується до полів типу checkbox (перемикачів) та radio (прапорців) для позначення їх включеного стану.
:indeterminate - псевдоклас зворотний :checked. Оформляє прапорці та перемикачі у неактивному стані.
:required - вибере елементи з атрибутом required (робить поле обов'язковим для заповнення перед відправкою форми)
:optional - зворотний :required селектор. Вибере всі елементи, не обов'язкові для заповнення.
:root – вибирає кореневий тег документа. Відповідає html тегу.
:valid – після заповнення поля форми, якщо вміст відповідає типу, який має бути введений у поле (кНаприклад, у полі з type="number" введено номер), то вважається, що поле пройшло перевірку на валідність даних. До такого поля і буде застосований цей селектор.
:invalid - зворотний :valid селектор. Застосовується якщо поле не пройшло перевірку на валідність (наприклад, у полі з type="number" введений текст).

Залежно від розташування елемента

:first-child – застосовується до першого дочірнього елементу тега. Можна використовувати для нестандартного оформлення першого пункту списку.
:last-child - елемент оформлення зворотний: first-child. Застосовується до останнього дочірнього елементу тега.
:nth-child(значення) – додасть стиль дочірнім елементам з певним номером (відповідно до нумерації дерева елементів). Можливі значення: число – певний номер елемента; odd – усі непарні елементи; even – усі парні елементи; вираз за типом an + b, де a і b цілі числа, а n лічильник, що змінює свій номер від 0 до нескінченності.
:nth-last-child(значення) - відмінність з попереднім псевдокласом полягає тільки в тому, що нумерація відбувається не від першого, а від останнього елемента.
:only-child – вибере дочірній елемент батька лише за умови, що він один.
:first-of-type - вибирає перший елемент заданого типу (наприклад однакові теги), що відноситься до одного батька. Спробую пояснити тег td є дочірнім для tr. При застосуванні даного псевдокласу до td всі перші комірки в рядках змінять своє оформлення.
:last-of-type - псевдоклас зворотний :first-of-type - послідовний елемент заданого типу, що відноситься до одного батька.
:nth-of-type(значення) – за аналогією з :first-of-type додасть стиль дочірнімелементам певного типу які стосуються одного з певним номером (відповідно до нумерації дерева елементів). Можливі значення: число – певний номер елемента; odd – усі непарні елементи; even – усі парні елементи; вираз за типом an + b, де a і b цілі числа, а n лічильник, що змінює свій номер від 0 до нескінченності.
:nth-last-of-type(значення) - від :nth-of-type відрізняється лише тим, що нумерація елементів йде не з кінця, а з початку.
:only-of-type – вибере дочірній елемент батька заданого типу, лише якщо він один.

Підбиваючи підсумки

Використовуючи псевдокласи CSS ми можемо робити наші сайти значно динамічнішими та виводити юзабіліті (зручність користування сайтом) на принципово новий рівень. Це стає зайвим бонусом для покращення поведінкових факторів користувачів на сайті надалі (допомагає у просуванні сайту в пошукових системах) та й просто вкрай сприятливо складається на зовнішньому вигляді сайту.