Оновлено: 19.05.2025
Child selector
Дочірні селектори
Дочірнім називається елемент, який безпосередньо розташовується всередині батьківського елемента. Який елемент виступає батьківським, а який його нащадком легко з'ясувати за допомогою дерева елементів - так називається структура відносин елементів документа між собою. (рис. 1).
На рис. 1 у зручному вигляді представлена вкладеність елементів та їх ієрархія. Тут дочірнім елементом по відношенню до <div> виступає елемент <p>. Разом з тим, <strong> не є дочірнім для елемента <div>, оскільки він розташований у контейнері <p>.
Синтаксис
E > F { Опис правил стилю }Стиль застосовується до елемента F, тільки коли він є дочірнім елементом E.
Приклад
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>Child Selectors</title>
<style>
#menu {
margin: 0; padding: 0; /* Remove padding */
}
#menu > li {
list-style: none; /* Remove list markers */
width: 100px /* Element width in pixels */
background: #b3d9d2; /* Background color */
color: #333; /* Text color */
padding: 5px /* Margin around text */
font-family: Arial, sans-serif; /* Chopped font */
font-size: 90% /* Font size */
font-weight: bold; /* Bold */
float: left; /* Arrange elements horizontally */
}
li > ul {
list-style: none; /* Remove list markers */
margin: 0; padding: 0; /* Remove padding around list items */
border-bottom: 1px solid #666; /* Bottom border */
padding-top: 5px; /* Add top padding */
}
li > a {
display:block; /* Links are displayed as a block */
font-weight: normal /* Normal text style */
font-size: 90% /* Font size */
background: #fff; /* Background color */
border: 1px solid #666; /* Frame parameters */
border-bottom: none /* Remove the bottom border */
padding: 5px /* Margin around text */
}
</style>
</head>
<body>
<ul id="menu">
<li>Edit
<ul>
<li><a href="undo.html">Cancel</a></li>
<li><a href="cut.html">Cut</a></li>
<li><a href="copy.html">Copy</a></li>
<li><a href="paste.html">Paste</a></li>
</ul>
</li>
<li>Style
<ul>
<li><a href="bold.html">Bold</a></li>
<li><a href="italic.html">Italic</a></li>
<li><a href="underline.html">Underline</a></li>
</ul>
</li>
<li>Size
<ul>
<li><a href="small.html">Small</a></li>
<li><a href="normal.html">Normal</a></li>
<li><a href="middle.html">Middle</a></li>
<li><a href="big.html">Big</a></li>
</ul>
</li>
</ul>
</body>
</html>