Псевдоклассы и псевдоэлементы селекторов.

Все правила можно получить из дерева документа(тегов, атрибутов и их значений), за исключением псевдокласов, которые зависят от поведения пользователя в браузера.

1) Псевдокласс :first-child Этот псевдокласс есть исключением и всего лишь дополняет дочерние селекторы тегов.
<STYLE type="text/css">
DIV>P { color: red }
</STYLE>
В этом случае правила выполняются в всех тегах P, для котрых родителем является тег DIV, но для того чтобы правило выполнялось только с первым совпадением ииспользуется псевдокласс :first-child
<STYLE type="text/css">
DIV>P:first-child { color: red }
</STYLE>

2)Псевдоклассы гиперссылки.
В каскадных таблицах стилей существует два псевдокласса, которые управляют не посещенными(:link) и посещенными(:visited) гипер ссылками
<STYLE type="text/css">
A:link { color: #000000 }
A:visited { color: #0000ff }
</STYLE>

3) Динамические псевдоклассы.
A:hover{ color: #0000ff } Этот псевдокласс выполняется если пользователь навел указатель мышки над элементом.
A:active{ color: #0000ff } Этот псевдокласс выполняется если активировал элемент, например нажал мышкой.
A:focus{ color: #0000ff } Этот псевдокласс выполняется если элемент имеет фокус(принял событие от клавиатуры или другие формы ввода текста)
Заметьте, что A:hover обязан размещаться после правил A:link и A:visited, а A:active только после A:hover, если этого не сделать правила могут быть нарушены.

4) Псевдокласс языка
Почти в каждом языке, есть символы которые отображаются в другом языке по другому, например кавычки, если в русском ‹‹ то в английском " и чтобы символы оттображались согласно языка и сущетвует псевдокласс :lang .
HTML:lang(fr) { quotes: '« ' ' »' }
HTML:lang(de) { quotes: '»' '«' '\2039' '\203A' }
:lang(fr) > Q { quotes: '« ' ' »' }
:lang(de) > Q { quotes: '»' '«' '\2039' '\203A' }
Для того чтобы этот псевдокласс выполнялся, текст должен быть помещен в теги с атрибутом lang

5) Псевдоэлементы позволяют управлять первой буквой или первой строкой в теге.
Псевдоэлемент :first-letter управляет первой буквой в теге, например:
P:first-letter { color: red }
согласно этого правила все первые буквы в тексе помещенные в тег P будут красными, я так-же использую этот псевдоэлемент, номерация это и есть этот псевдокласс, правда у меня он немного сложнее.
Псевдоэлемент :first-line тоже самое но не с первой буквой а с первой строкой
P:first-line { color: red } все первые строки будут красными.

Есть еще псевдоэлементы :before и :after, они генерируют содежнание в начале и в конце содержимого.
P:before { content: "Начало абзаца: " }
P:after { content: " Конец абзаца. " }
Текст из before будет перед абзацем, а из after в конце.
Вот живой пример, который будет в самом низу страницы выводить текст: "Copiring webuchebnik.ru"
BODY:after {
content: "Copiring webuchebnik.ru";
text-align: center;
}
Возможностей у этих псевдоэлементов на много больше, об этом поговорим когда будем проходить генерируемое содержимое.