Обычно при указании селекторов, мы пишем теги (имя тега и правило): 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;}
Метки: селектор
