Дочерние селекторы в CSS
Я думаю, что многие знают о контекстных селекторах в CSS. Они используются чаще всего, однако, опытные верстальщики прекрасно знают, что иногда контекстные селекторы вносят определённые проблемы. Это проблема связана с тем, что в структуре элемента может быть много одинаковых элементов, вложенных друг в друга. И необходимо применить стиль не для всех вложенных элементов, а только к непосредственно дочернему элементу. Вот для этого и используются дочерные селекторы в CSS.
Чтобы проблема стала более понятной, давайте приведу небольшой пример. Пусть у нас есть такой HTML-код:
<div class="container">
<div>
<p>Первый абзац</p>
</div>
<p>Второй абзац</p>
</div>
И наша задача сделать красным только "Второй абзац". Если мы напишем с использованием контекстного селектора:
.container p {
color: red;
}
То у нас станут красным оба абзаца, что нам совсем не нужно. Данная задача очень просто решается с помощью дочерних селекторов в CSS:
.container > p {
color: red;
}
Всё, теперь красным у нас стал только "Второй абзац". Поскольку именно данный абзац является непосредственно дочерним для .container. А "Первый абзац" является дочерним для внутреннего div, таким образом, под действие дочернего селектора он не попадает.
Вот так легко решаются такие задачи, однако, есть один огромный минус дочерних селекторов в CSS - они не работают в браузерах Internet Explorer. По этой причине, их использование крайне нежелательно. Но если Вы вдруг где-нибудь встретите, то теперь Вы будете знать, что означает данный тип селекторов и что он делает.
-
Создано 20.02.2012 09:54:47
-
Михаил Русаков
Комментарии (1):
А если вот такой код: <div class="container"> <div> <p>Первый абзац</p> <div> <p>Второй абзац</p> </div> </div> <p>Третий абзац</p> </div> Как в таком случае применить дочерние селекторы к Второму абзацу ???
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.