Сестринские селекторы

Сестринские селекторы используются в случаях, когда существенно, что некие структурные элементы являются потомками одного родительского и один из них непосредственно предшествует другому. В этом случае в селекторе используется символ "+".

Следующий пример иллюстрирует вполне реальную ситуацию. Как правило, уместно отделять заголовки от предшествующего текста значительным отступом (свойство margin-top). Такой отступ можно было бы задать, например, со значением 20-30 px. И это хорошо выглядит, если между заголовками разных уровней есть какой-то вводный текст. Но может оказаться, что в ряде случаев, скажем, между заголовками 1-го и 2-го уровня такого текста нет. То есть, эти заголовки непосредственно следуют один за другим. Тогда повышенный отступ явно не нужен.

Итак, следующие правила стиля говорят о том, что заголовок 2-го уровня (h2), как правило, отделяется от предшествущего текста отступом 30px. Но в случае, когда он идет непосредственно за заголовком 1-го уровня (h1), этот отступ снижается до 15px. Во втором объявлении использован сестринский селектор.

h2 { margin-top: 30px;}

h1+h2 { margin-top: 15px;}

/* Выбрать только элементы LI (элементы списка),

находящиеся в ЛЮБОМ элементе с инедтификатором left */

#left li {

margin-left: 10px;

}

/* Выбрать только элементы списка, находящиеся

внутри НЕНУМЕРОВАННОГО списка класса headers */

ul.headers li {

}

/* Выбрать только выделения b внутри заголовка второго уровня

с идентификатором main, находящегося внутри любого элемента

класса index (не забываем, что BODY - тоже элемент

и он может иметь класс и идентификатор! */

.index h2#main b {

}

Селекторы типа Х ~ Y

Этот CSS-селектор очень похож на X + Y, однако, является менее строгим. При использовании ul + p будет выбрать только первый элемент, идущий за Х. В данном случае будут выбраны все элементы p, идущие на ul.

ul ~ p { color: red; }

X[title]

В CSS-селекторах также можно использовать атрибуты. Например в данном примере мы выделили все ссылки, имеющие атрибут титле. Остальные ссылки останутся не затронутыми.

a[title] { color: green; }

X [href="Foo"]

Все ссылки, которые ссылаются на everstudent.ru будут золотыми. Все остальные ссылки останутся неизменными неизменным.

a[href="http://everstudent.ru"] { color: #ffde00; }

X [HREF *= "everstudent.ru"]

Вот то, что нам нужно. Звезда обозначает, что искомое значение должно появляться где-нибудь в атрибуте. Таким образом, CSS-селектор охватывает everstudent.ru, http://everstudent.ru/portfolio и т.д.

a[href*="everstudent"] { color: # 1f6053; }

Псевдокласс X:hover

Хотите применить стиль к элементу, когда наводите на него мышкой? Тогда этот CSS-селектор для вас.

Имейте в виду, что старые версии Internet Explorer применяют:hover только к ссылкам.

div:hover { background: #e3e3e3; }

Date: 2016-02-19; view: 448; Нарушение авторских прав