Есть еще несколько селекторов, добавленных в CSS3 или считающихся частью этой спецификации, которые могут оказаться весьма полезными при создании дизайна. В этих селекторах с помощью символов >, + и ~ описываются отношения между двумя элементами.
Листинг 2.22. Селектор >
Div > p. mytext2{ color: #990000;
}
Селектор > указывает, что правило применяется ко второму элементу при условии, что он является потомком первого. Правило, использованное в листинге 2.22, модифицирует элементы <p>, для которых элемент <div> — родительский. В данном случае мы добавили еще одно условие и ссылаемся только на элементы <p>, у которых значение атрибута class равно mytext2.
Листинг 2.23. Селектор +
P. mytext2 + p{ color: #990000;
}
Следующий селектор конструируется с использованием символа +. Он позволяет сослаться на второй элемент при условии, что прямо перед ним находится первый элемент. Предок обоих элементов должен быть одним и тем же.
Правило, использованное в листинге 2.23, влияет на элемент <p>, следующий за другим элементом <p>, который, в свою очередь, идентифицируется классом mytext2. Если вы откроете в браузере HTML-файл с кодом из листинга 2.14, то увидите, что красным цветом выделен текст в третьем элементе <p>, так как прямо перед ним находится элемент <p> с атрибутом class, равным mytext2.
Для конструирования последнего селектора используется символ ~. Данный селектор похож на предыдущий, однако элемент, на который распространяется правило, не обязательно должен следовать сразу за первым элементом. Кроме того, элементов может быть несколько.
Листинг 2.24. Селектор ~
P. mytext2 ~ p{ color: #990000;
}
Правило, использованное в листинге 2.24, меняет представление третьего и четвертого элементов <p> в нашем примере. Стиль применяется ко всем элементам <p>, являющимся братьями и расположенным после элемента <p> с классом mytext2. Если между ними встретятся другие элементы разных типов, это не будет играть роли — все равно стиль поменяется только для третьего и четвертого элементов <p>. Поэкспериментируйте с HTML-кодом из листинга 2.14: вставьте элемент <span></span> после элемента <p> с классом mytext2, и вы сможете убедиться в том, что данное правило модифицирует только элементы <p>.
Добавить комментарий