Типы селекторов CSS

Содержание

1 Объединение селекторов в CSS
2 Комбинаторы CSS

Обычно при указании селекторов, мы пишем теги (имя тега и правило): div{color:red}.

Однако количество селекторов (т.е. тех меток, которые можно применять в наших документах) гораздо больше. Их всего 7 разных видов:

Тег — div{color:red}.
id — #back{color:red}. Т.е. когда в селекторах стоит решетка #, а за ней какое-то слово, значит мы ищем элемент с таким атрибутом id, и для него применяем правило. Значение атрибута id всегда уникальное. Лучше его применять в отдельных областях (шапка сайта, левая колонка, футер), т.е. создаем здесь элементы с уникальным атрибутом id.
Класс — .blue{color:blue}. Т.е. когда элементы в разных частях страницы имеют одинаковое оформление. Значение атрибута не уникальное, т.е. его можно применять у разных элементов. Можно применять пробелы, чтобы отделять друг от друга разные классы. Атрибут «класс» лучше использовать при описании элементов, которые могут повторяться в разных областях.
Атрибуты — [title]{background:#ffc;}. И так можно задавать правила для любого атрибута. В атрибутах можно указывать и точное значение (см. пример ниже) и правило для него. При этом учитывается регистр слов.
Псевдоклассы. «Псевдо» — потому, что в коде никаких классов нет. Это состояние вашего элемента, которое формируется в результате построения вашего документа (т.е. можно описывать элементы в зависимости от их месторасположения в документе) или от состояния, которое получается в результате ваших действий (например, навели мышкой на элемент, у него появился псевдокласс, увели мышку с элемента, всевдокласс исчез).
Псевдоэлементы. Это область, которой в реальности нет, она возникает только в момент построения данного элемента. Это области в наших элементах, которых специально в коде не выделяли. Например, есть параграф, и никаких дополнительных элементов внутри нет. А нам надо выделить первую строчку в нем. Для этого используют псевдоэлементы. Всего их 4 штуки — см. ниже примеры.

Тег
   div{color:red}
id
   #back{color:red}
Класс
   .news{background:#ccf;}
   .last{font-size:3em;}
Атрибут
   [title]{background:#ffc;}
   [title="заголовок первый"]{padding:50px;} - ищем заголовок и для него применяем правило
   [title~="заголовок"]{font-size:2em;} - ищем точное слово "заголовок" и для него применяем правило.
   [title*="вок"]{color:#f00;} - ищем символы, которые могут стоять в любом месте данного атрибута
   [href]{padding-left:20px; background-image:url(icon.png); background-repeat:no-repeat; margin-right:30px;} - ставим фоновую картинку без повторения
Псевдокласс
   :link {font-size:3em;} - непосещенная гиперсылка
   :visited {font-size:2em; background:#f00} - посещенная гиперссылка
   p:hover {background:#ccf;} - наведение мышки на параграф
   p:active {color:#ffc;} - при нажатии левой кнопки мыши на параграфе
   :focus {font-size:4em; color:#fff;} - когда элемент получает фокус (ссылки и элементы форм)
   p:first-child {} - дети параграфа, т.е. элементы, которые находятся внутри параграфа
Псевдоэлементы
   p:first-line{font-size:2em; color:#69c;} - первая линия параграфа
   p:first-letter{font-size:3em; color:#f60;} - первый символ
   p:after{content:"new"}
   p:before{content:"Att. "}

Объединение селекторов в CSS

Селекторы можно объединять в единое целое. Это значит ужесточение требований к элементу (например, изменение цвета ссылки, если она посещена и находится внутри параграфа).

Объединение tags + id
   p#in{color:#0f0;}
Объединение tags + class
   p.news{color:#0f0;}
   #in.begin{color:#0f0;}
Объединение class + class
   .news{color:#f00;}
   .news.last{color:#0f0;}
Объединение class + pseudo-class
   .news:hover{color:#0f0;}
Объединение class + pseudo-elements
   .news:first-letter{color:#0f0;}
Объединение class + attributes
   .begin[title]{color:#0f0;}
Объединение attributes + pseudo-elements
   [title]:first-letter{color:#0f0;}
Объединение pseudo-class + pseudo-class
   :first-child:hover{color:#0f0;}
   :visited:hover{color:#f00;}
Объединение attributes + attributes
   [class][title]{color:#0f0;}
Объединение tags + id + class + attributes + pseudo-class
   p#in.begin[title]:hover{color:#0f0;}
Объединение tags + id + class + attributes + pseudo-elements + pseudo-class
   p#in.begin[title][class][id]:first-child:first-letter{color:#0f0;}

Комбинаторы CSS

Часто на странице есть области, в которых могут встречаться одинаковые элементы. Их можно оформить с помощью атрибутов или классов (см. выше в статье). А как сделать наоборот? Например, на странице есть меню (навигация гиперссылки), и в контенте тоже присутствуют ссылки; оформлять эти элементы мы будем по-разному. Очевидно, надо ориентироваться на то, где они находятся: гиперссылки в левой части находятся в элементе с id=left, а элементы гиперссылки справа находятся в id=content.

Как учесть, что эти гиперссылки находятся в разных элементах? Для этого есть комбинаторы. Это учет того, где расположены элементы в вашем документе.

Примеры:

Контекстный селектор - предки-потомки
   div strong{font-size:3em;color:#f30;}
Дочерний селектор - родитель-ребенок (div - это родитель)
   div > strong{font-size:3em;color:#f30;}
Смежный селектор - ближайший смежный элемент сверху в коде
   h1 + p{font-size:3em;color:#f30;}
Смежный селектор - любой смежный элемент сверху в коде
   h1 ~ p{font-size:3em;color:#f30;}