В прошлом уроке рассмотрен еще один вид селекторов это групповые селекторы, в этом уроке мы продолжим изучать виды селекторов. Сегодня мы рассмотрим, как создавать селекторы потомки. Что это за такие селекторы. Существует такое понятие как «Предок» и «потомок» и CSS основан на этой системе.
Как Вы возможно уже заметили существуют вложенные теги (друг в друга), формирующие тем самым древовидную структуру. И любая html страница представляется именно в виде такого дерева. У истоков такого дерева стоит тег <html> </html> это корень всех остальных html тегов и все остальные теги находятся внутри него. За тегом <html> </html> идут два потомка, то есть следующие два основных тега это теги <head> </head> и <body> </body>, а уже в этих двух тегах сосредоточенны все остальные теги.
Те есть ВСЕ теги находящиеся в теге <html> </html> являются для него потомками. Для тега <body> </body> потомками являются уже только те теги, которые находятся только внутри него. Соответственно для тега <head> </head> будут, является потомки те теги, которые находятся внутри него, для тега <ol> </ol> потомками будут является все теги внутри него <li> </li> и так со всеми другими тегами.
Аналогичная иерархия, только в обратном порядке, и с родителями тегов, для <li> </li> родителем является тег <ol> </ol>, для них родителем является тег <body> </body>, а общим для них всех является родитель тег <html> </html>.
Вот на такой схеме построены несколько CSS селекторов с помощью которых мы можем отбирать элементы основываясь на родстве между элементами. И давайте рассмотрим, как создаются такие селекторы.
Представим что у нас два списка один нумерованный список тег <ol> </ol> и второй ненумерованный список тег <ul> </ul>. Как мы уже знаем у двух этих списков элементы обозначаются через теги <li> </li>. И тут задача: у ненумерованного списка выделить все элементы красным цветом.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Селекторы</title>
<link href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
- Я 1-й элемент у списка
- Я 2-й элемент у списка
- Я 3-й элемент у списка
- Я 1-й элемент у списка
- Я 2-й элемент у списка
- Я 3-й элемент у списка
</body> </html>
Из того что мы уже знаем, мы могли бы для каждого элемента списка задать какой-то класс или идентификатор и уже для них задать красный цвет, но это не совсем правильно. Если же задать просто для тега <li> </li> красный цвет, то у нас нечего не получится, так как у двух видов списка элементы обозначаются через тег <li> </li> и все элементы <li> </li> закрасятся в красный цвет что для нас не подходит.
Вот для таких случаев и применяется селектор «потомков» мы знаем что все теги ненумерованного списка <li> </li> являются потомками тега <ul> </ul> и вот уже для этого родства мы и можем задать нужный цвет. Делается это просто: сначала мы пишем их родителя ul, а потом их потомка li.
Ul li {
color:#cc0000;
}
То есть такая запись будет обозначать, что надо взять все теги <li> </li> у которых родителем будет является тег ul. Или Все элементы <li> </li> которые вложены в тег ul. И для них задаем условие закрасить в красный цвет. В результате у нас будет закрашен в красный цвет только не нумерованный список, а нумерованный останется в прежнем виде.
Теперь давайте усложним задачу и представим что у нас вместо двух списков добавится еще два списка один нумерованный и три не нумерованных и из ненумерованных списков только одному задать красный цвет. В таком случае если следовать вышеуказанному примеру и задать селектор ul li, то у нас закрасятся все три ненумерованных списка, а нам нужен только один.
В таком случае есть два варианта:
Первый: для нужного списка ul задать класс, после чего ему задать условие.
Второй: заключить нужный список в <div> </div> блок все про тег div и ему уже задать уникальный идентификатор.
Давайте рассмотрим оба способа и начнем с первого.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Селекторы</title>
<link href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
- Я 1-й элемент у списка
- Я 2-й элемент у списка
- Я 3-й элемент у списка
- Я 1-й элемент у списка
- Я 2-й элемент у списка
- Я 3-й элемент у списка
- Я 1-й элемент у списка
- Я 2-й элемент у списка
- Я 3-й элемент у списка
- Я 1-й элемент у списка
- Я 2-й элемент у списка
- Я 3-й элемент у списка
</body> </html>
И такой селектор будет выглядеть следующим образом.
Ul.list li {
color:#cc0000;
}
То есть такая запись будет обозначать, что надо взять все теги <li> </li> у которых родитель <ul> </ul> имеет класс list и ему задать красный цвет.
И рассмотрим второй способ через div блок. Для этого тот список, который нужен, оборачиваем div блоком и для него задаем идентификатор.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Селекторы</title>
<link href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
- Я 1-й элемент у списка
- Я 2-й элемент у списка
- Я 3-й элемент у списка
- Я 1-й элемент у списка
- Я 2-й элемент у списка
- Я 3-й элемент у списка
- Я 1-й элемент у списка
- Я 2-й элемент у списка
- Я 3-й элемент у списка
- Я 1-й элемент у списка
- Я 2-й элемент у списка
- Я 3-й элемент у списка
</body> </html>
Селектор примет следующий вид:
#list ul li{
color:#cc0000;
}
Такая запись говорит, что для всех элементов <li> </li>, которые находятся внутри тега <ul> </ul>, который находится в свою очередь внутри элемента с идентификатором list присвоить красный цвет.
Вот так работают селекторы «потомков». Они очень часто используются, поэтому потренируетесь и освойте данный вид селектора. Такие виды селекторов могут иметь сколь угодно длинную последовательность. Такие селекторы читаются справа налево, то есть с конца в начало.
Вот мы рассмотрели еще один вид селекторов, и если Вы все сделали верно, то у вас получится картина, как в Демо, а мы идем дальше изучая другие виды селекторов.
CSS