Как уже говорилось в предыдущем уроке, комбинации селекторов используют для более точного указания элемента, к которому следует применить те или иные правила. Так вот таких комбинаций существует три вида. Давайте разберем каждую комбинацию более подробно.
Контекстный селектор
В этом виде комбинации используется взаимоотношение между тэгами "предок - потомок". Мы записываем несколько селекторов в строку через пробел, а после последнего задаем правило, которое будет относиться только к последнему селектору. А все, что мы записали перед ним – это для более точного указания элемента, к которому будет это правило применяться. Общий вид такой:
селектор1 селектор2 … селекторN{правило;}
Давайте рассмотрим пример такой комбинации. У нас есть код нашей страницы, и мы решили создать для него таблицу стилей и присоединить к документу способом "связывание". Вот код документа:
А вот наша таблица стилей:
Все правила Css лучше читать справа налево. Данное правило говорит, что для всех элементов <em>, у которых среди предков есть элемент <div>, причем, не важно, в каком он месте находится, цвет содержимого будет окрашен в красный цвет. В нашем случае правило будет применено для всех элементов <em>, кроме того, который содержит слово "Какой-то", так как у него нет среди предков тэга <div>. Если мы в таблице стилей перед <div> поставим, например, селектор body, то это правило будет читаться так: для всех элементов <em>, у которых среди предков есть элемент <div>, у которого, в свою очередь, среди предков есть элемент <body>, цвет содержимого будет окрашен в красный цвет. В этом случае произойдет то же самое – элемент <em>, содержащий слово "Какой-то" не будет окрашен, хоть у него и есть предок <body>. Но в нашем правиле четко сказано, что у <em> должен быть предок <div>, и у него среди предков есть <body>, а не <em>.
Важно понимать, что если мы запишем вот так: div body{color:red;}. То данное правило не будет применяться ни к чему, так как важна очередность.
Ужесточение требований
А вот если записать селекторы не через пробелы, а слитно, то мы ужесточаем требования:
Здесь мы говорим, что красный цвет шрифта должен быть не просто во всех элементах <div>, а в тех, которым присвоен класс page.
Дочерний селектор
Этот вид комбинации использует взаимоотношение "родители и дети". Записываются селекторы в данной комбинации так:
селектор1>селектор 2 {правило;}
Давайте поменяем правило в нашей таблице стилей на такое:
В этом правиле говорится, что для всех элементов <em>, родителями которых являются тэги <p>, цвет содержимого будет окрашен в красный цвет. В нашем случае это правило будет применяться ко всем <em>, так как у всех этих тэгов в нашем документе есть родитель <p>.
К сожалению, данная комбинация не работает в браузерах IE 6 и ниже.
Соседний селектор
Этот вид комбинации использует взаимоотношение "братья". Записываются селекторы в этой комбинации двумя способами:
селектор1+селектор2{правило;}
Рассмотрим на примере. Изменим правило в нашей таблице стилей следующим образом:
Эта запись означает, что для всех элементов <p>, у которых ближайшим братом сверху или слева (в коде) является <h2>, содержимое будет окрашено в красный цвет. В нашем случае это самый первый элемент <p>.
Есть другой вид этой комбинации, который записывается так:
селектор1~селектор2{правило;}
Изменим правило в нашей таблице следующим образом:
Такая запись будет читаться следующим образом. Для всех <p>, у которых среди братьев сверху или слева (в коде) есть <h2>, содержимое будет окрашено в красный цвет. В данном случае у нас окрасится содержимое всех тэгов <p>, кроме того, который содержит "Внешний параграф".
Этот вид комбинации тоже не работает в IE 6 и ниже.
В этой же теме я хочу поговорить о таком понятии, как "группировка селекторов". Допустим, Вам нужно для нескольких селекторов записать одно и то же правило. Чтобы ускорить этот процесс, Вы можете перечислить эти селекторы через запятую, а потом записать для них правило. Например:
Если Вы захотите для какого-то селектора из этой комбинации дописать что-то еще, то Вы можете это сделать ниже в таблице Css.
Вот и все по этой теме. В следующем уроке мы рассмотрим правила приоритетов в Css.