У цьому останньому підручнику про селектори я представлю вам дуже специфічну форму селекторів. Це так звані псевдокласи та псевдоелементи. Це селектори, які не відносяться до певних HTML-елементів, а генеруються пристроєм виведення.
За допомогою псевдокласів та псевдоелементів можна визначити декларації для елементів HTML, які не можуть бути однозначно описані за допомогою HTML-елементів. Типовими прикладами є недавно натиснутий або ще не відвіданий гіперпосилання.
Оформлення гіперпосилань
Дуже часто потрібно оформити гіперпосилання сторінки. У цьому CSS надає безліч можливостей, за допомогою яких можна адресувати різні стани гіперпосилань і в кінцевому рахунку також налаштовувати їх візуально.
Якщо ви, наприклад, хочете призначити гіперпосиланню червоний колір, це виглядатиме наступним чином:
a:link {
color: red;
}
З a:visited уже позначаються відвідані гіперпосилання. За допомогою наступного синтаксису можна представити такі гіперпосилання, які вже були натиснуті, синім кольором.
a:visited {
color:blue;
text-decoration:none;
}В браузері це виглядає так: 
Якщо ви хочете окремо оформити гіперпосилання, які в даний момент натискаються, це також можливо.
a:active {
font-weight: bold;
color: blue;
text-decoration: none;
}
Для цього використовується синтаксис a:active.
Синтаксис a:hover, з іншого боку, вказує на стан, коли курсор миші перебуває над гіперпосиланням. Крім того, є ще один псевдоелемент a:focus. Це описує момент, коли гіперпосилання отримує фокус.
Інші псевдоелементи
Існують псевдоелементи, за допомогою яких можна звертатися до частин інших елементів. Типовим прикладом є ::first-letter. Цей псевдоелемент вибирає перший символ поточного елемента. Він може бути застосований до всіх елементів, що містять текст. Але увага: псевдоелементи повинні бути вказані тільки в кінці всіх селекторів. Тобто вони повинні стояти перед відкритою фігурною дужкою.
h1::first-letter {
color: blue;
}
За допомогою ::first-line можна звертатися до першого рядка елементу. Цей псевдоелемент застосовується виключно до блокових елементів. Приклад:
p::first-line {
background-blue;
}
І ось результат в браузері:
ein
За допомогою псевдоелементів :after та :before можна вставляти додатковий вміст до та після елементу. За допомогою content визначається, що має бути виведено.
• normal – зазвичай визначений псевдоелемент не генерується.
• none – псевдоелемент не генерується.
• <string> – виводиться вказаний рядок. Рядки слід заключати в одиночні або подвійні лапки.
• <uri> – вставляється ресурс, вказаний у URI.
• <counter> – визначає лічильник або звертається до певного лічильника.
• attr(<identifier>) – вставляється значення атрибута, вказаного в дужках.
• close-quote – додає закриваючий лапки.
• no-close-quote – закриваючі лапки не додаються, але глибина вкладеності збільшується на одиницю.
• no-open-quote – відкриваючі лапки не додаються, але глибина вкладеності збільшується на одиницю.
• open-quote – додає відкриваючий лапки.
Приклад:
ul li:before {
content: uri("bullet.gif");
}
З CSS3 також було введено псевдоселектор :not. За його допомогою можна дуже просто вибирати конкретний вміст. Перший приклад показує, наскільки потужним є цей псевдоселектор насправді. Припустимо, ви хочете вибрати всі гіперпосилання, які не мають атрибута href. Відповідний синтаксис виглядав би наступним чином:
a:not([href])
Звичайні гіперпосилання залишаться незмінними для цього синтаксису. Однак таким чином можна мати доступ до визначення якорів.
<a name="top">Сторінка вверх</a>
Ще один більш детальний приклад показує потужність :not. У документі визначено різні абзаци тексту.
<body> <h1>PSD-Tutorials.de</h1> <p>Це є абзац.</p> <p>Це є ще один абзац.</p> <div>Це є область тексту.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
Окрім текстових абзаців, позначених з p, існує також область div та посилання. Тепер має відбутися наступне:
• Всі текстові абзаци, позначені з p, отримають чорний колір шрифту.
• У всіх місцях, де немає текстових абзаців p, буде використовуватися червоний колір шрифту.
Відповідний синтаксис CSS виглядає наступним чином:
p {
color:#000;
}
:not(p) {
color:#ff0000;
}Принцип успадкування
Одним із найважливіших аспектів у зрозумінні визначень CSS є успадкування. Фактично, в CSS стильові властивості успадковуються з одного елементу на інший.
Приклад:
html {
color: red
}Цим визначенням кольоровий передній план html-елементу призначається червоний. 
Через це визначення кольору html впливає тільки на внутрішність div. Текстовий абзац робиться чорним.
У CSS існують різні способи встановлення стильових визначень. Це все лежить в основі того, що для елементу можуть існувати протирічливі вказівки. У таких випадках CSS передбачає принцип зважування. Цей принцип визначає, яка з інструкцій має перевагу для елементу. Я не пройду у деталі цього принципу в цей момент. Ви можете знайти докладні інформації, наприклад, на веб-сайті http://wiki.selfhtml.org/wiki/CSS/Kaskade або також на http://www.thestyleworks.de/basics/cascade.shtml.
Моя мета - показати, на що варто звертати увагу при визначенні властивостей CSS. Це продемонструє такий приклад:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC;
}
h2 strong {
color: red;
}
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Це абзац з <strong>жирним словом</strong>.</p>
<h2>Це заголовок з <strong>жирним словом</strong>.</h2>
</div>
</body>
</html>У браузері це виглядає наступним чином:
Як бачите, слова, позначені strong, форматуються по-різному. Формат, який застосовується, залежить від порядку визначень.
Також існує ключове слово !important, за допомогою якого можна позначити CSS-інструкцію як особливо важливу.
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC !important;
}
h2 strong {
color: red;
}
</style>Ось як виглядає результат:
В цьому контексті обов'язково прочитайте згадані у цьому покроковому покроці джерела. (Навіть якщо на початку вам не доведеться дуже заглиблюватися в цю тему).
