С помощью CSS можно определить, какие правила применять к элементам дерева документа. Эти модели, называемые селекторами, могут варьироваться от простых имен элементов до сложных моделей. Если все условия в шаблоне верны для определенного элемента, селектор совпадает с элементом. В следующем списке приведен синтаксис CSS 2.1 селекторов.
Синтаксис CSS 2.1 селекторов:
- * — любой элемент
- E — любой E элемент.
- E F — любой F элемент, являющийся наследником E элемента.
- E > F — любой F элемент, являющийся прямым потомком E элемента.
- E:first-child — элемент E, когда E — первый потомок его родителя.
- E:link, E:visited — элемент E, если E содержит ссылку, которая еще не была посещена. (:link) или уже была посещена (:visited).
- E:active, E:hover, E:focus — элемент E во время определенных действий пользователя. Active — нажатие, hover — наведение, focus — активность элемента (например, активное поле input для ввода текста)
- E + F — любой элемент F непосредственно следующий за элементом E.
- E[foo] — любой элемент E с атрибутом «foo», который имеет любое значение.
- E[foo=»warning»] — любой элемент E с атрибутом «foo», равным «warning».
- E[foo~=»warning»] — любой элемент E с атрибутом «foo». Атрибут может содержать несколько разделенных пробелом значений, одно из которых точно равно «warning».
- DIV.warning — то же, что и DIV[class=»warning»]
- E#myid — любой E элемент с id равным myid.
И несколько примеров:
div > P { color: red; /* текст внутри всех тегов p в теге div будет красного цвета */ } /* текст в теге p, который идет сразу за тегом math будет размеров 20px */ math + p { font-size: 20px; } /* текст в теге span, у которого атрибут hello равен Cleveland и атрибут goodbye равен Columbus, будет голубого цвета */ span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }