Описание тега css-selectors

Описание тега Вопросы с тегом

Селекторы - это шаблоны, которые соответствуют элементам в дереве документа. В правиле CSS они используются для определения стилей для элементов, соответствующих шаблону.

Простые селекторы:

/* Type selector */  
eltname {}

/* Class selector */
.classname {}

/* ID selector */
#idname {}

/* Universal selector */
* {}

/* Attribute selector */
[attr] {}
[attr=value] {}
[attr~=value] {}
[attr|=value] {}
[attr^=value] {}
[attr$=value] {}
[attr*=value] {}

Комбинаторы

/* Adjacent sibling combinator */
A + B {} 

/* General sibling combinator */
A ~ B {}

/* Child combinator */
A > B {}

/* Descendant combinator */
A B {}

/* Column combinator */
A || B {}

Псевдоклассы

/* Pseudo-classes */
a:visited {}
a:hover {}
a:active {}
a:focus {}

Псевдоэлементы

/* Pseudo-elements */
p::first-line {}
p::before {}
p::after {}

Полезные ресурсы по селекторам CSS:

Будущие реализации:

W3C CSS Selectors Level 4 Рабочий проект