Селекторы потомков CSS
Всем доброго времени суток. На связи Алексей Гулынин. Вы уже знаете несколько видов селекторов в CSS из этой статьи. В данной статье я бы хотел рассказать, что такое селекторы потомков в CSS. Давайте разберемся что такое родитель и потомок? Для браузера наша страница представляется в виде дерева. Самым верхним корневым тегом является тег <html> (крестный отец всех тегов), затем идут два других тега: это <head> и <body> (левая и правая рука крестного отца). В этих двух тегах находятся все остальные теги. Получается, что для тега <html> теги <head> и <body> являются потомками, а он для них предком.
Все теги на странице являются потомками тега <html>.
Давайте разберем пример со списком. Создадим ненумерованный список:
<html> <head> <meta charset="utf-8"/> </head> <body> <ul> <li>Элемент списка №1</li> <li>Элемент списка №2</li> <li>Элемент списка №3</li> </ul> </body> </html>
В данном случае тег <meta> является потомком тега <head>. Теги <ul>, <li> являются потомками тега <body>. В свою же очередь, теги <li> являются потомками для тега <ul>, а он же в свою очередь является их родителем.
На этой системе основаны некоторые CSS селекторы, которые позволяют таким образом отбирать элементы.
Допустим, мы хотим сделать все элементы ненумерованного списка зеленым цветом. В данном случае можно было бы добавить класс каждому элементу или добавить уникальный идентификатор, а затем в файле стилей задать свойства. Можно сделать по-другому, используя селектор потомков в CSS:
ul li {
color:green;
}
Думаю, здесь вопросов не должно возникнуть. Данная последовательность тегов может быть сколь угодно большой. Также она может включать в себя идентификаторы. Давайте наш список поместим в блок div с классом "block" и сделаем все элементы ненумерованного списка желтыми (для большей наглядности примера добавим ещё нумерованный список):
<html> <head> <meta charset="utf-8"/> </head> <body> <div class="block"> <ul> <li>Элемент списка №1</li> <li>Элемент списка №2</li> <li>Элемент списка №3</li> </ul> <ol> <li>Элемент списка №1</li> <li>Элемент списка №2</li> <li>Элемент списка №3</li> </ol> </div> </body> </html>
Файл стилей в данном случае будет иметь вид:
.block ul li {
color:yellow;
}
После этого вы увидите, что все элементы ненумерованного списка стали желтыми, а нумерованного — нет (данный пример надуманный, можно было бы просто написать ul li и всё бы работало).
Домашнее задание: создайте два блока с различными идентификаторами. В каждом из этих блоков разместите по параграфу. В каждый параграф поместите по две произвольные ссылки. Седлайте ссылки одного блока красными, а другого зелеными.
В данной статье вы узнали, что такое селекторы потомков в CSS.
На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.
