alt

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

alt


Селекторы предков и потомков CSS.

Категория: Уроки CSS Просмотров: 699 Коментариев: 0 Дата: 2017-08-27 Добавил: admin

 Селекторы предков и потомков CSS

В прошлом уроке рассмотрен еще один вид селекторов это групповые селекторы, в этом уроке мы продолжим изучать виды селекторов. Сегодня мы рассмотрим, как создавать селекторы потомки. Что это за такие селекторы. Существует такое понятие как «Предок» и «потомок» и CSS основан на этой системе.

Как Вы возможно уже заметили существуют вложенные теги (друг в друга), формирующие тем самым древовидную структуру. И любая html страница представляется именно в виде такого дерева. У истоков такого дерева стоит тег <html> </html> это корень всех остальных html тегов и все остальные теги находятся внутри него. За тегом <html> </html> идут два потомка, то есть следующие два основных тега это теги <head> </head> и <body> </body>, а уже в этих двух тегах сосредоточенны все остальные теги.

Те есть ВСЕ теги находящиеся в теге <html> </html> являются для него потомками. Для тега <body> </body> потомками являются уже только те теги, которые находятся только внутри него. Соответственно для тега <head> </head> будут, является потомки те теги, которые находятся внутри него, для тега <ol> </ol> потомками будут является все теги внутри него <li> </li> и так со всеми другими тегами.

Теги потомки CSS

Аналогичная иерархия, только в обратном порядке, и с родителями тегов, для <li> </li> родителем является тег <ol> </ol>, для них родителем является тег <body> </body>, а общим для них всех является родитель тег <html> </html>.

Теги родители CSS

Вот на такой схеме построены несколько CSS селекторов с помощью которых мы можем отбирать элементы основываясь на родстве между элементами. И давайте рассмотрим, как создаются такие селекторы.

Представим что у нас два списка один нумерованный список тег <ol> </ol> и второй ненумерованный список тег <ul> </ul>. Как мы уже знаем у двух этих списков элементы обозначаются через теги <li> </li>. И тут задача: у ненумерованного списка выделить все элементы красным цветом.

HTML
<!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. Я 1-й элемент у списка
  2. Я 2-й элемент у списка
  3. Я 3-й элемент у списка
  • Я 1-й элемент у списка
  • Я 2-й элемент у списка
  • Я 3-й элемент у списка
</body> </html>

Из того что мы уже знаем, мы могли бы для каждого элемента списка задать какой-то класс или идентификатор и уже для них задать красный цвет, но это не совсем правильно. Если же задать просто для тега <li> </li> красный цвет, то у нас нечего не получится, так как у двух видов списка элементы обозначаются через тег <li> </li> и все элементы <li> </li> закрасятся в красный цвет что для нас не подходит.

Вот для таких случаев и применяется селектор «потомков» мы знаем что все теги ненумерованного списка <li> </li> являются потомками тега <ul> </ul> и вот уже для этого родства мы и можем задать нужный цвет. Делается это просто: сначала мы пишем их родителя ul, а потом их потомка li.

CSS
Ul li  {
    color:#cc0000;
}

То есть такая запись будет обозначать, что надо взять все теги <li> </li> у которых родителем будет является тег ul. Или Все элементы <li> </li> которые вложены в тег ul. И для них задаем условие закрасить в красный цвет. В результате у нас будет закрашен в красный цвет только не нумерованный список, а нумерованный останется в прежнем виде.

Теперь давайте усложним задачу и представим что у нас вместо двух списков добавится еще два списка один нумерованный и три не нумерованных и из ненумерованных списков только одному задать красный цвет. В таком случае если следовать вышеуказанному примеру и задать селектор ul li, то у нас закрасятся все три ненумерованных списка, а нам нужен только один.

В таком случае есть два варианта:

Первый: для нужного списка ul задать класс, после чего ему задать условие.

Второй: заключить нужный список в <div> </div> блок все про тег div и ему уже задать уникальный идентификатор.

Давайте рассмотрим оба способа и начнем с первого.

HTML
<!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. Я 1-й элемент у списка
  2. Я 2-й элемент у списка
  3. Я 3-й элемент у списка
  • Я 1-й элемент у списка
  • Я 2-й элемент у списка
  • Я 3-й элемент у списка
  • Я 1-й элемент у списка
  • Я 2-й элемент у списка
  • Я 3-й элемент у списка
  • Я 1-й элемент у списка
  • Я 2-й элемент у списка
  • Я 3-й элемент у списка
</body> </html>


И такой селектор будет выглядеть следующим образом.

CSS
Ul.list li  {
    color:#cc0000;
}

То есть такая запись будет обозначать, что надо взять все теги <li> </li> у которых родитель <ul> </ul> имеет класс list и ему задать красный цвет.

И рассмотрим второй способ через div блок. Для этого тот список, который нужен, оборачиваем div блоком и для него задаем идентификатор.

HTML
<!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. Я 1-й элемент у списка
  2. Я 2-й элемент у списка
  3. Я 3-й элемент у списка
  • Я 1-й элемент у списка
  • Я 2-й элемент у списка
  • Я 3-й элемент у списка
  • Я 1-й элемент у списка
  • Я 2-й элемент у списка
  • Я 3-й элемент у списка
  • Я 1-й элемент у списка
  • Я 2-й элемент у списка
  • Я 3-й элемент у списка
</body> </html>

Селектор примет следующий вид:

CSS
#list ul li{
    color:#cc0000;
}

Такая запись говорит, что для всех элементов <li> </li>, которые находятся внутри тега <ul> </ul>, который находится в свою очередь внутри элемента с идентификатором list присвоить красный цвет.

Вот так работают селекторы «потомков». Они очень часто используются, поэтому потренируетесь и освойте данный вид селектора. Такие виды селекторов могут иметь сколь угодно длинную последовательность. Такие селекторы читаются справа налево, то есть с конца в начало.

Вот мы рассмотрели еще один вид селекторов, и если Вы все сделали верно, то у вас получится картина, как в Демо, а мы идем дальше изучая другие виды селекторов.


Просмотреть демо: Демо

Скачать исходник: Скачать



Добавить комментарий:


Ваше имя

Текст комментария


Введите буквы с учетом регистра:





Апдейты

Популярное Свежие записи

Облако тегов