CSS дочерние селекторы
Детский Селектор
Дочерние селекторы CSS выбирают элемент, который является дочерним по отношению к другому элементу.
Если x, y и z - это три HTML-элемента, а z находится внутри начального и конечного тега y, а y находится внутри начального и конечного тега x; тогда у называется дочерним от х; и z называется как ребенок от y.
При написании дочерних селекторов селекторы должны быть разделены комбинатором «>».
синтаксис:
Selector1> Selector2 ...... {CSS-Свойство: значение; ........................} Простой пример дочерних селекторов CSS
Код CSS:
p em {
color: red; /* sets color to red */
}HTML код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Simple Example of CSS child selectors</title>
<link rel='stylesheet' href='Simple-Example-of-CSS-child-selector.css' type='text/css'>
</head>
<body>
<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Donec a <em>urna</em> elit.</p>
</div>
</body>
</html>
Результат:
Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Донецк урна элит .
Посмотрите этот простой пример дочернего селектора CSS в отдельном окне браузера.
Расширенный пример дочерних селекторов CSS
Код CSS:
div > p > span > em {
color: red; /* sets color to red */
}HTML код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Advanced Example of CSS child selectors</title>
<link rel='stylesheet' href='Advanced-Example-of-CSS-child-selector.css' type='text/css'>
</head>
<body>
<div>
<p><span>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit.</span> <span>Donec a <em>urna</em> elit.</span></p>
</div>
</body>
</html>
Результат:
Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Донецк урна элит .
Посмотреть этот расширенный пример дочернего селектора CSS в отдельном окне браузера.
Предыдущая: Селекторы потомков CSS
Далее: CSS соседние селекторы
Новый контент: Composer: менеджер зависимостей для PHP , R программирования