Селекторами могут выступать теги, классы и идентификаторы, к которым применяются определенные свойства. Изменение, которое сделано для определенного тега будет относится ко всем тегам в HTML-документе, а так же для всех остальных документов, к которым будет привязан файл стилей.
Но что если требуется выбрать определенные теги, стоящие в некоторой последовательности?
Для подобного управления селекторами применяют контекстные, дочерние и соседние селекторы. Существует ещё универсальный селектор, который обозначается знаком * и служит для того, чтобы описать стили для всех элементов. Универсальный селектор обычно указывается в начале файла со стилями ( *{свойства стилей} ), как правило, в нем указывается общий фон, общий шрифт и т.п.
Контекстные селекторы
Контекстные селекторы обозначаются для выбранных вложенных тегов. То есть к тегам в HTML-документе, которые находятся внутри других тегов, будут применены обозначенные стили. Для этого сначала пишем тег-контейнер, а через пробел ставим тег, который находится в нём:
div b {font-size:14px; color: brown;} - стиль в файле CSS
<div>текст<b>выделенный</b></div> - часть кода в HTML-документе
После этих записей изменения коснуться только слова "выделенный", так как оно находится в теге b, стоящем в <div>
Дочерние селекторы
Дочерние селекторы по своему действию похожи с контекстными, они также предназначены для изменения свойств вложенных тегов. Разница состоит в том, что контекстные селекторы изменяют все вложенные теги, а дочерние - только те, которые непосредственно вложены. Дочерние селекторы обозначаются знаком >.
div>p {color: blue} - пример стиля в файле CSS
В результате получится, что весь текст окрасится синим цветом, кроме слова, заключенного в тег b, так как он не является дочерним элементом для <div>.
Соседние селекторы
Соседние селекторы являются тегами, которые в HTML-документе находятся рядом друг с другом, но не разделены другими тегами, и не вложены, как контекстные селекторы. Для их обозначения в файле стилей используется знак +:
b+img {border: 1px solid #993300} - стиль в файле CSS
<p><b>Картинка1<b><img src="/images/pic.jpg"></p> - код в HTML
После этого изображение, которое в HTML-документе находится после тега b будет показываться в рамке. Если вы не знаете как вставлять изображения на веб-страницу читайте тут.
