Псевдокласи – це ключові слова, які додаються до CSS селекторів і змінюють їх стан та положення внаслідок дій користувачів. В якості прикладу можна навести текстове посилання, яка змінює свій колір чи розмір при наведенні на нього курсора миші. При використанні псевдокласів браузер не перевантажує поточний документ, тому за допомогою псевдокласів можна отримати різні динамічні ефекти на сторінці.
Синтаксис застосування псевдокласів
Селектор: Псевдоклас { Опис правил стилю }
Спочатку вказується CSS селектор, до якого додається псевдоклас. Далі ставиться двокрапка, після якої вказується ім'я псевдокласу.
Допускається застосовування псевдокласів до імен ідентифікаторів (id=" ... ") або класів (class=" ... "). Приклад:
a.menu:hover {
color: green
}
Також псевдокласи можна застосувати до контекстних селекторів. Приклад:
.menu a:hover {
background: #fc0;
}
Якщо псевдоклас вказується без селектора попереду (:hover), то він буде застосовуватися до всіх елементів поточного документа.
Умовно всі псевдокласи діляться на три групи:
- визначають стан елементів;
- стосуються дерева документа;
- вказують мова тексту.
Псевдокласи, що визначають стан елементів
До цієї групи належать псевдокласи, які розпізнають поточний стан елемента і застосовують стиль тільки для цього стану.
Псевдоклас :active
Спрацьовує внаслідок активації елементу користувачем. Наприклад, посилання стає активним, якщо навести на нього курсор і клацнути мишкою. Незважаючи на те, що активним може стати практично будь-який елемент веб-сторінки, псевдоклас :active використовується переважно для посилань.
Псевдоклас :link
Застосовується до неактивних посилань, на які користувач ще не натискав. Браузер деякий час зберігає історію відвідувань, тому посилання може бути позначене як вже активоване хоча б тому, що за ним раніше було зафіксовано перехід.
Запис a {. ..} і a:link {...} матимуть однаковий результат, оскільки в браузері вони дають один і той же ефект. Тому псевдоклас :link можна не вказувати. Винятком є якірні посилання, на які дія :link не поширюється.
Псевдоклас :focus
Застосовується до елемента коли той отримує фокус. Наприклад, для текстового поля форми отримання фокусу означає, що курсор встановлений в поле, і за допомогою клавіатури можна вводити в нього текст (приклад 15.1).
Приклад 15.1. Застосування псевдокласу :focus
HTML5CSS 2.1IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Псевдокласи</title>
<style>
input:focus{
color: red; /* Червоний колір тексту */
}
</style>
</head>
<body>
<form action="">
<p> <input type="text" value="Чорний текст"> </p>
<p> <input type="text" value="Чорний текст"> </p>
</form>
</body>
</html>
Результат прикладу показаний нижче (рис. 15.1). У другому рядку знаходиться курсор, тому текстове поле отримало фокус.
В наведеному вище прикладі в текстовому полі міститься попередній текст, він визначається значенням атрибута value тега <input>. При натисканні на елемент форми відбувається отримання полем фокусу, і колір тексту змінюється на червоний. Варто клацнути в будь-якому іншому місці сторінки (крім текстового поля, звичайно), як відбудеться втрата фокусу і текст повернеться до первісного чорному кольору.
Результат буде видно тільки для тих елементів, які можуть отримати фокус. Зокрема, це теги <a>, <input>, <select> і <textarea>.
Псевдоклас :hover
Псевдоклас :hover активізується під час наведення на елемент курсору миші.
Псевдоклас :visited
Даний псевдоклас застосовується до посилань, які користувач уже відвідав раніше. Зазвичай таке посилання змінює свій колір за умовчанням на фіолетовий, але за допомогою стилів колір і інші параметри можна задати самостійно (приклад 15.2).
Приклад 15.2. Зміна кольору посилань
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Псевдокласи </title>
<style>
a:link {color:#036; /* Колір невідвіданих посилань */ }
a:visited {color:#606; /* Колір відвіданих посилань */ }
a:hover {color:#f00; /* Колір посилань при наведенні на них курсора миші */ }
a:active {color:#ff0; /* Колір активних посилань */ }
</style>
</head>
<body>
<p>
<a href="1.html">Посилання 1</a> | <a href="2.html">Посилання 2</a> | <a href="3.html">Посилання 3</a>
</p>
</body>
</html>
Результат прикладу показано на рис. 15.2.
В даному прикладі показано використання псевдокласів спільно з посиланнями. При цьому має значення порядок проходження псевдокласів. Спочатку вказується :visited, а потім йде :hover, в іншому випадку відвідані посилання не будуть змінювати свій колір при наведенні на них курсора.
Селектори можуть містити більше одного псевдокласу, які перераховуються поспіль через двокрапку, але тільки в тому випадку, якщо їх дії не суперечать одне одному. Так, запис a:visited:hover є коректним, а запис a:link:visited - ні. Втім, якщо підійти до цього питання формально, то валідатор CSS вважає коректним будь-яке поєднання псевдокласів.
Браузер Internet Explorer 6 і більш ранні версії дозволяє використовувати псевдокласи :active і :hover тільки для посилань. Починаючи з версії 7.0 псевдокласи в цьому браузері працюють і для інших елементів.
Псевдоклас :hover не обов'язково повинен застосовуватися до посилань, його можна додавати і до інших елементів документа. Так, в прикладі 15.3 показана таблиця, рядки якої змінюють свій колір при наведенні на них курсора миші. Це досягається за рахунок додавання псевдокласу :hover до селектора tr.
Приклад 15.3 . Виділення рядків таблиці
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Псевдокласи</title>
<style>
table {border-spacing:0;}
td{padding: 4px;}
tr:hover {background: #fc0;} /* Міняємо колір фону рядка таблиці */
</style>
</head>
<body>
<table width="400" border="1">
<tr>
<th> </th>
<th> Піки </th>
<th> Хресто </th>
<th> Бубни </th>
<th> Чирва </th>
</tr>
<tr>
<td> Чебурашка </td>
<td> 5 </td> <td> 2 </td> <td> 4 </td> <td> 2 </td>
</tr>
<tr>
<td> Крокодил Гена </td>
<td> 2 </td> <td> 7 </td> <td> 1 </td> <td> 3 </td>
</tr>
<tr>
<td> Шапокляк </td>
<td> 5 </td> <td> 4 </td> <td> 3 </td> <td> 1 </td>
</tr>
<tr>
<td> Щур Лариса </td>
<td> 1 </td> <td> 0 </td> <td> 5 </td> <td> 7 </td>
</tr>
</table>
</body>
</html>
Результат прикладу показаний нижче (рис. 15.3).
Псевдокласи, що стосуються дерева документа
До цієї групи належать псевдокласи, які визначають положення елемента в дереві документа і застосовують до нього стиль в залежності від його статусу.
Псевдоклас :first-child
Застосовується до першого дочірнього елементу селектора, який розташований в дереві елементів документа. Щоб стало зрозуміло, про що йдеться, розберемо невеликий код (приклад 15.4).
Приклад 15.4. Використання псевдокласу :first-child
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Псевдокласи</title>
<style type="text/css">
b:first-child {color: red;} /* Червоний колір тексту */
</style>
</head>
<body>
<p><b>Lorem ipsum </b> dolor sit amet, <b>consectetuer</b> adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </p>
<p><b>Ut wisis enim </b> ad minim veniam, <b>quis nostrud</b> exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea <b>commodo consequat</b>.</p>
</body>
</html>
Результат прикладу показано нижче (рис. 15.4).
В даному прикладі псевдоклас :first-child додається до селектора b і встановлює для нього червоний колір тексту. Хоча контейнер <b> зустрічається в першому абзаці три рази, червоним кольором буде виділено лише перша згадка, тобто текст «Lorem ipsum». В інших випадках вміст контейнера <b> відображається чорним кольором. З наступним абзацом все починається знову, оскільки батьківський елемент змінився. Тому фраза «Ut wisis enim» також буде виділена червоним кольором.
Браузер Internet Explorer підтримує псевдоклас :first-child починаючи з версії 7.0.
Псевдоклас :first-child найзручніше використовувати в тих випадках, коли потрібно задати різний стиль для першого й інших однотипних елементів. Наприклад, в деяких випадках новий рядок для першого абзацу тексту не встановлюють, а для інших абзаців додають відступ першого рядка. З цією метою застосовують властивість text-indent з потрібним значенням відступу. Але щоб змінити стиль першого абзацу і прибрати для нього відступ буде потрібно скористатися псевдоклас :first-child (приклад 15.5).
Приклад 15.5 . Відступи для абзацу
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Псевдокласи</title>
<style>
p {text-indent: 1em;} /* Відступ першого рядка */
p:first-child {text-indent: 0;} /* Для першого абзацу відступ прибираємо */
</style>
</head>
<body>
<p>Історію цю вже почали забувати, хоча деякі містяни, які час від часу розповідали її новоприбулим відвідувачам міста.</p>
<p>Легенда обростала подробицями і вже зовсім не нагадувала реальну подію. Проте, не дивлячись на це, жодна людина не наважувався заїкнутися про неї з настанням темряви.</p>
<p>Але одного разу в місто знову увійшов незнайомець. Він кульгав на ліву ногу.</p>
</body>
</html>
Результат прикладу показаний нижче (рис. 15.5).
В даному прикладі перший абзац тексту не містить відступу першого рядка, а для інших він встановлений.
Псевдокласи, що задають мову тексту
Для документів, в яких одночасно використовуються тексти на декількох мовах може бути важливим дотримання правил синтаксису, характерних для тієї чи іншої мови. За допомогою псевдокласів можна змінювати стиль оформлення іншомовних текстів, а також корегувати деякі налаштування.
Псевдоклас :lang
Визначає мову, яка використовується в документі або його фрагменті. У коді HTML мова встановлюється через атрибут lang, він зазвичай додається до тегу <html>. За допомогою псевдокласу :lang можна задавати певні настройки, характерні для різних мов, наприклад, вигляд лапок в цитатах. Синтаксис наступний.
Елемент:lang(мова) {...}
В якості мови можуть виступати наступні значення: uk - українська; en - англійська; de - німецький; fr - французький; it - італійський.
Приклад 15.6. Вигляд лапок в залежності від мови
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8 ">
<title> Lang </title>
<style>
p {font-size: 150%;} /* Розмір тексту */
q:lang(de) {quotes: "\201E" "\201C";} /* Вигляд лапок для німецької мови */
q:lang(en) {quotes: "\201C" "\201D";} /* Вигляд лапок для англійської мови */
q:lang(fr), q:lang(uk) {quotes: "\00AB" "\00BB";} /* Вигляд лапок для української і французької мов */
</style>
</head>
<body>
<p>Цитата французькою мовою: <q lang="fr">Ce que femme veut, Dieu le veut</q>.</p>
<p>Цитата німецькою: <q lang="de">Der Mensch, versuche die Gotter nicht</q>.</p>
<p>Цитата англійською: <q lang="en">Те be or not to be </q>.</p>
</body>
</html>
Результат наведеного вище прикладу показано на рис. 15.6. Для відображення типових лапок в прикладі використовується стильова властивість quotes, а саме перемикання мови і відповідного виду лапок відбувається через атрибут lang, що додається до тегу <q>.
Запитання для перевірки
1. Олег зробив посилання, які змінюють колір фону при наведенні на них курсора миші. Для цього він використовував наступний стиль.
a {color:blue; background:orange; }
a:hover {background:yellow; color:black; }
a:visited {color:white; }
a:active {color:red; }
Проте деякі посилання при наведенні на них курсору не змінювали свій колір на чорний. Чому?
- Код CSS не дійсний.
- До селектору a не додано псевдоклас :link.
- Псевдоклас :visited варто після :hover.
- Псевдоклас :active варто після :visited.
- Некоректна властивість color в a:hover.
2. Потрібно виділити фоновим кольором перший рядок таблиці. Який псевдоклас підійде для цієї мети?
- :active
- :first-child
- :focus
- :hover
- :lang
3. До яких елементів додає стиль наступна конструкція - a:link:visited:hover ?
- До невідвіданих посиланнях.
- До відвіданих посилань.
- До будь-яких посилань при наведенні на них курсора миші.
- До відвіданих посилань при наведенні на них курсора миші.
- до жодного елементу.