selector = simple-selector (combinator simple-selector)*
simple-selector = (type | universal) (attribute | class | ID | pseudo-class | pseudo-elemenet)*
combinator = whitespace | > | + | ~
Селектор представляет собой правило которое описывает на какие элементы документа применить стиль соответствующий селектору.
Селекторы можно группировать в разделенный запятыми список - такой селектор представляет собой обьединение всех селекторов в списке. Как логическое "И" для множеств.
Эти два определения эквивалентны:
h1 { font-family: sans-serif }
td.someClass span p { font-family: sans-serif }
tbody > tr th { font-family: sans-serif }h1, td.someClass span p , tbody > tr th { font-family: sans-serif }А эти уже нет:
h1 { font-family: sans-serif }
someInvalidType { font-family: sans-serif }
h3 { font-family: sans-serif }h1, someInvalidType, h3 { font-family: sans-serif }В первом примере невалидный лишь один селектор, в то время как во втором - тоже один:) Потому что теперь это рассматривается как один селектор.
В упрощенном варианте - просто имя HTML элемента. Полный синтаксис, с поддержкой namespaces можно посмотреть по ссылке: CSS qualified names.
h1 { font-family: sans-serif }
span { color: red }
div { display: block }
/* да будет все красным! */
* { color: red } Селектор, который определяет любой элемент на странице. Его можно опускать. На самом деле правило, которое было вначале, выглядит так:
simple-selector =
(type | universal) (attribute | class | ID | pseudo-class)*
| (attribute | class | ID | pseudo-class)+
Это как раз то, что позволяет писать привычные нам селекторы типа:
[href*=google] { color: red }
.warning { color: red }
#myid { color: red }Однако опускать его рекомендуется не всегда. Иначе можно попастаться, например, на вот такое:
div :first-child
div:first-childБолее правильным будет такой вид: div *:first-child
/* Представляет собой любой элемент, у которого есть аттрибут att, независимо от его значения */
[att]
/* Представляет собой любой элемент, у которого есть аттрибут att который равен val */
[att=val]
/* Представляет собой любой элемент, у которого есть аттрибут att,
чье значение это разделенный пробелами список слов, одно из которых это val */
[att~=val]
/* Представляет собой любой элемент, у которого есть аттрибут att который равен val
или начинается с val с непосредственно идущим после этого знаком '-' */
[att|=val]
/* Представляет собой любой элемент, у которого есть аттрибут att,
чье значение начинается с val */
[att^=val]
/* Представляет собой любой элемент, у которого есть аттрибут att,
чье значение заканчивается на val */
[att$=val]
/* Представляет собой любой элемент, у которого есть аттрибут att, чье значение содержит val */
[att*=val]Синтаксис имен аттрибутов - как синтаксис идентефикаторов в языках программирования.
Также поддерживаются имена в виде строк: "attribute" "another attribute"
'|=' в основном применяется для языковых штук типа en-US
Примеры
h1[title] { color: red }
div > span[hello="Cleveland"][goodbye="Columbus"] { color: red }
/* смэтчит например тэг <a rel="copyright copyleft copydown copyup copy cp obj.Clone()"> */
a[rel~="copyright"] { color: red }
/* смэтчит <a hreflang="en-US"> */
a[hreflang|="en"] { color: red }
/* картинки на странице*/
object[type^="image/"]
/* ссылки на html страницы */
a[href$=".html"]
/* аттрибут title просто должен содержать hello */
p[title*="hello"]
Удобный способ нотации для аттрибута class.
Такие селекторы эквивалентны:
<span class="victor fedorovich"></span>span.victor { color: red}
span[class~="victor"] { color: red}
Удобный способ нотации для аттрибута id.
h1#chapter1 { color: red }
#chapter1 { color: red }
div#top > span#level > p#warning { color : red }
Были введены для возможности выбора элементов, основываясь на информации, которая лежит за пределами дерева элементов и не может быть выражена другими простыми селекторами. Названия псевдо-классов не чувстсвительны к регистру. Некоторые псевдо-классы могут быть использованы одновременно, некоторые нет. Некоторые являются "динамическими" в том смысле, что элемент может приобретать или терять класс в ответ на действия пользователя. Псевдо-классы начинаются с двоеточия, псевдо-элементы начинаются с двух двоеточий. Некоторые псевдо-классы:
:link
:visited
:hover
:active
:nth-child()
:nth-of-type()
:not()
Некоторые псевдо-элементы:
::after (:after)
::before (:before)
::first-letter (:first-letter)
::first-line (:first-line)
::selection
Многие браузеры предоставляют вендорные псевдо-элементы:
::-webkit-slider-thumb
::-ms-track
::-moz-range-progress
Полный список хорошо представлен по этой ссылке: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
Позволяет выразить отношение "предок-потомок" по отношению к элементам. Этот кобинатор - это whitespace, который отделяет двое простых селекторов.
h1.victor[attr=value] em.fedorovich { color: red }Такой селектор выберет em только если он является потомком h1.
Позволяет выразить отношение "предок-непосредственный потомок" по отношению к элементам. Записывается символом '>'.
h1 > em { color: red }
h1 > * > em { color: red }
Выбирает элемент предшествующий другому элементу.
span ~ div { color: red }Сдесь элемент div будет выбран если на одном с ним уровне вложенности находится элемент span который обьявлен где-то перед ним.
<div>
<span></span>
<p></p>
<div></div>
</div>
Выбирает элемент непосредственно предшествующий другому элементу.
span ~ div { color: red }Сдесь элемент div будет выбран если на одном с ним уровне вложенности находится элемент span который обьявлен непосредственно перед ним.
<div>
<span></span>
<div></div>
<p></p>
</div>
Спецификация CSS3 селекторов: https://www.w3.org/TR/selectors