Селектори псевдокласів

Опис селектора:

  • Завдання, що виконується - вибір всіх елементів за певним псевдокласом.
  • Позначення - назва псевдокласу (з попередньою двокрапкою).
  • Приклад використання:

задамо колір, в який будуть фарбувати всі посилання при наведенні миші.

Докладніше про селектори псевдокласів

Псевдоклас - це фантомний клас, наявність якого залежить від стану елемента або структури документа в цілому.

Все працює так, ніби в певних умовах у якогось HTML-елемента автоматично з'являється/зникає якийсь клас. Назви цих класів-примар та умови їх появи відомі заздалегідь і це дозволяє застосовувати до таких елементів різні стилі (тобто змінювати їх оформлення).

Самі псевдокласи, приклади їх застосування та підтримка браузерами дуже детально розглянуті у нашому довіднику CSS. Для детального ознайомлення з темою раджу після читання статті обов'язково заглянути туди (CSS за стандартами, підрозділ «Псевдокласи»).

Псевдокласи CSS2

У CSS2 визначено 4 групи псевдокласів (частина з яких перекочувала з CSS1).

Псевдоклас :first-child

Задає стиль елемента, що є першим нащадком свого батька. Якщо тобі не дуже зрозуміло, що таке батько та нащадок, можна переглянути докладну статтю Дерево документа HTML.

приклад. Забираємо маркер у першого елемента списку:

Зауваження! IE6 не розуміє цей псевдоклас. Але це не проблема, тому що навчити Осла виділяти перший нащадок можна за допомогою прийому, описаного в статті Псевдоклас: first-child для ІЕ6

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

приклад. Задаємо колір для відвідуваних посилань:

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

Ці псевдокласи застосовуютьсядо елементів залежно від дій користувача. CSS2 визначає три таких псевдокласу - :hover, :active і :focus.

приклад. При наведенні миші на посилання видаляємо підкреслення:

Динамічні псевдокласи часто застосовуються для пожвавлення сторінки — створення ефекту реакції елементів на дії користувача без застосування скриптів. Але у такому методі є хитрий підводний камінь. Справа в тому, що використання динамічного псевдокласу не зобов'язує браузер перемальовувати всю сторінку!

Звичайно, якщо при наведенні миші змінюється колір елемента або підкреслення, то проблем не буде. Сам "піддослідний" елемент обов'язково перемальовується. А ось, якщо ти задумаєш, наприклад, збільшити йому шрифт (внаслідок чого сусідні елементи, швидше за все, змушені будуть зрушити, а в особливо складних випадках, припустимо, переїхати на інший рядок або потрапити в інший стовпчик), то кросбраузерності тобі ніхто не гарантує . Звичайно, багато браузерів все перемальовують коректно. Але в специфікації чітко сказано "не зобов'язані". Це може вилитися як у кривизну відображення, так і в ігнорування проблемного стилю, заданого для динамічного псевдокласу.

Псевдоклас

Використовується для вибору елементів їхньої мови. Код мови вказується у круглих дужках.

При цьому, згідно специфікації, інформація про мову може бути отримана і кількох джерел, таких як атрибут lang, метатег Content-language, інформація протоколу (HTTP-заголовок).

приклад. Усі французькі написи відобразимо червоним кольором:

Комбінування псевдокласів

За бажання можна об'єднувати селектори псевдокласів. Задані таким чином стилі будуть застосовуватися тільки до елементів, у яких будуть перераховані всі псевдокласи.

приклад. Прихуємомаркер першого елемента списку, а при наведенні на нього мишки відобразимо:

Примітка! Комбінування псевдокласів, як і множинні класи, некоректно працює у IE.

Галузь застосування

Селектори псевдокласів – постійні супутники майже будь-якого CSS. Якщо ти використовуєш скидання стилів (а я настійно раджу його використовувати), то ти вже застосовуєш псевдокласи посилань та динамічні псевдокласи.

Самі собою динамічні псевдокласи часто використовують у елементах форм введення чи завдання поведінки посилань чи активних елементів.

Нарешті грамотне застосування: first-child дозволяє спростити та зменшити HTML-код, наприклад, як описано у статті Забираємо клас для першого елемента.