CSS селекторы.

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

Синтаксис CSS 2.1 селекторов:

  1. * — любой элемент
  2. E — любой E элемент.
  3. E F — любой F элемент, являющийся наследником E элемента.
  4. E > F — любой F элемент, являющийся прямым потомком E элемента.
  5. E:first-child — элемент E, когда E — первый потомок его родителя.
  6. E:link, E:visited — элемент E, если E содержит ссылку, которая еще не была посещена. (:link) или уже была посещена (:visited).
  7. E:active, E:hover, E:focus — элемент E во время определенных действий пользователя. Active — нажатие, hover — наведение, focus — активность элемента (например, активное поле input для ввода текста)
  8. E + F — любой элемент F непосредственно следующий за элементом E.
  9. E[foo] — любой элемент E с атрибутом «foo», который имеет любое значение.
  10. E[foo=»warning»] — любой элемент E с атрибутом «foo», равным «warning».
  11. E[foo~=»warning»] — любой элемент E с атрибутом «foo». Атрибут может содержать несколько разделенных пробелом значений, одно из которых точно равно «warning».
  12. DIV.warning — то же, что и DIV[class=»warning»]
  13. 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; 
}

 

Автор статьи: Alex. Категория: CSS
Дата публикации: 01.03.2013