Дочерние и соседние селекторы CSS
Добрый вечер уважаемые коллеги, сегодня мы изучим с Вами два дополнительных селектора, которые
называются дочерними и соседними селекторами css. В большей степени можно обойтись и без них, однако,
для вашего развития их нужно усвоить, и иногда применять, чтобы они оставались в вашей памяти. Поэтому обсудим, какие селекторы являются
соседними, а какие дочерними и разберем на примере.
Дочерние селекторы css - элементы, которые располагаются внутри родительского элемента. Пример этому может быть следующим.
Мы имеем блок, в котором находится параграф, еще один блок и картинка. Вот эти три элемента и являются дочерними. Если в дочернем блоке также находятся
другие элементы, то они уже не являются дочерними у первого блока, а являются дочерними у блока, в котором непосредственно находятся. Надеюсь, суть
Вы уловили.
Соседние селекторы CSS - элементы располагающиеся друг за другом в коде документа. Пример этому такой. Мы имеет параграф и
следующий за ним тег span. Все довольно ясно, а нам лишь осталось разобрать все это на реальных примерах.
<html>
<head>
<title>Дочерние и соседние селекторы css</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div>
<p>Текст в абзаце</p>
<span>Текст в span</span>
<div>
<p>Уже не дочерний текст в абзаце</p>
</div>
</div>
</body>
</html>
При помощи стилей добавим одинаковый результат для тега span
div > span {
font-size: 200%;
}
p + span {
color: red;
}
Результат выполнения кода в обоих случаях будет применяться к тегу span, т.к., он является дочерним по отношению к тегу div и следующим после тега p. Поэтому шрифт стал в два раза больше и красного цвета. Теперь мы с Вами полностью разобрались с дочерними и соседними селекторами в CSS, а Вам остается лишь укреплять свои знания на практике, до скорого!
