В CSS1 стиль обычно применяется к элементу в соответствии с его позицией в структуре документа. Эта простая модель достаточна для широкого спектра стилей, но она не покрывает несколько типичных эффектов. Концепция псевдо-классов и псевдо-элементов расширяет механизм адресации в CSS1, чтобы позволить информации, внешней по отношению к документу, оказывать влияние на процесс форматирования.
Псевдо-классы и псевдо-элементы могут использоваться в селекторах CSS, но они не существуют в исходном тексте HTML. Напротив, они "вставляются" UA в соответствии с некоторыми условиями. Их поведение можно описать с помощью фиктивной последовательности тэгов.
Псевдо-элементы используются для адресации подчастей элементов, в то время как псевдо-классы позволяют различать различные типы элементов.
Псевдо-классы ссылок Назад
UA часто отображают недавно посещенные ссылки не так как не посещенные или посещенные давно. В CSS1 эти ситуации обрабатываются с помощью псевдо-классов элемента "A":
A:link { color: red } /* unvisited link */
A:visited { color: blue } /* visited links */
A:active { color: lime } /* active links */
Все элементы "A" с атрибутом "HREF" будут помещены в одну и только одну из этих групп (т.е. псевдо-классы не влияют на ссылки-якоря). UA могут по собственному усмотрению перемещать элемент из "visited" в "link" после некоторого периода времени. Ссылка типа "active" - это ссылка, которая в данный момент выбрана (например нажатием на кнопку мыши) читателем.
Форматирование псевдо-класса ссылки происходит также, как если бы класс был указан вручную. UA не обязан переформатировать уже отображаемый документ при переходе ссылки из одного псевдо-класса в другой. Например таблица стилей может законно указывать, что "font-size" ссылки типа "active" должен быть больше, чем у ссылки типа "visited", но UA не обязан динамически переформатировать документ, когда читатель выбирает ссылку типа "visited".
Селекторы псевдо-класса не соответствуют обычным классам и наоборот. Правило в следующем примере не будет оказывать никакого влияния:
A:link { color: red }
<A CLASS=link NAME=target5> ... </A>
В CSS1 псевдо-классы ссылок не оказывают влияния ни на один элемент, кроме "A". Поэтому тип элемента в селекторе можно опускать:
A:link { color: red }
:link { color: red }
Эти два селектора будут идентичны в CSS1.
Имена псевдо-классов не зависят от регистра.
Псевдо-классы могут использоваться в контекстных селекторах:
A:link IMG { border: solid blue }
Псевдо-классы также могут комбинироваться с простыми классами:
A.external:visited { color: blue }
<A CLASS=external HREF="http://out.side/">external link</A>
Если ссылка в этом примере была посещена, то она будет синей. Обратите внимание, что имя обычного класса предшествует имени псевдо-класса в селекторе.
1 2 3
8 8 8
| |
*
Обратная связь