Руководство CSS combinator Selectors
View more Tutorials:
Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи.
Facebook
Descendant combinator (Комбинатор потомков): Белое пространство (white space) поставленное между 2-мя Selector, например ( A B ). В начале, он ищет все элементы подходящие Selector 1 и получает результат 1, потом он ищет все элементы потомки (descendant) элементов результата 1 подходящие Selector 2, и получает результат 2. Результат 2 и есть ожидаемое.
Синтаксис:
selector1 selector2 {
}
selector1 selector2 selector3 {
}
Например, найдеите элементы <span> являющиеся потомками элементов <div>:
div span {
background: yellow;
}
Например, найдем все элементы <li>, являющиеся потомками элементов "ul.sidebar".
/* List items that are descendants of the "sidebar" list */
ul.sidebar li {
margin: 2em;
}
Пример:
combinator-example1.css
li {
list-style-type: disc;
}
li li {
list-style-type: circle;
}
combinator-example1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>CSS Descendant combinator</title>
<link rel="stylesheet" type="text/css" href="combinator-example1.css" />
</head>
<body>
<h3>CSS Descendant combinator</h3>
<ul>
<li>
<div>CSS</div>
<ul>
<li>
<div>CSS Selectors</div>
<ul>
<li>Basic Selectors</li>
<li>Combinator</li>
</ul>
</li>
<li>CSS Tables</li>
</ul>
</li>
<li>
<div>Java</div>
<ul>
<li>Spring</li>
<li>Struts</li>
</ul>
</li>
</ul>
</body>
</html>
Child combinator (Селектор дочерних элементов): Символ "больше" ( > ) поставлен между 2-мя Selector, например ( A > B ). Сначала, он ищет все элементы подходящие Selector 1 и получает результат 1, потом он ищет все напрямую дочерние элементы в результате 1 и подходящие Selector 2 и получает результат 2. Результат 2 и есть ожидаемое.
Синтаксис:
selector1 > selector2 {
}
selector1 > selector2 > selector3 {
}
Пример:
combinator-example3.css
div.box {
margin: 5px;
padding: 5px;
border: 1px solid green;
}
div.box > p.title {
font-size: 20px;
color: blue;
}
combinator-example3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>CSS Descendant combinator</title>
<link rel="stylesheet" type="text/css" href="combinator-example3.css" />
</head>
<body>
<h3>CSS Child combinator</h3>
<div class="box">
<p class="title">CSS</p>
<p class="content">
CSS stands for Cascading Style Sheets,...
</p>
</div>
<div class="box">
<p class="title">Javascript</p>
<p class="content">
JavaScript is a scripting or programming language that
allows you to implement complex features on web pages,...
</p>
</div>
</body>
</html>
General sibling combinator (Генеральный родственный комбинатор): Знак ( ~ ) ставится между 2-мя Selector, например (A ~ B). Сначала, он ищет все элементы подходящие Selector 1 и получает результат 1, потом ищет "родственные элементы моложе " (younger siblings) элеметов из результата 1 и подходящие Selector 2 и получает результат 2. Результат 2 и есть ожидаемое.
Пример:
combinator-example5.css
a {
margin:5px;
font-size: 20px;
}
.menubar {
margin: 10px 0px;
padding: 5px;
border: 1px solid #ddd;
}
a:hover {
color: blue;
font-weight: bold;
}
a:hover ~ a {
font-size: 80%;
font-style: italic;
color: black;
}
combinator-example5.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>CSS General Sibling combinator</title>
<link rel="stylesheet" type="text/css" href="combinator-example5.css" />
</head>
<body>
<h3>CSS General Sibling combinator</h3>
<a href="#">Top Link</a>
<div class="menubar">
<a href="#">CSS</a>
<a href="#">Javascript</a>
<a href="#">HTML</a>
<a href="#">Bootstrap</a>
<a href="#">jQuery</a>
</div>
</body>
</html>
Adjacent sibling combinator (Комбинатор следующего соседнего элемента): Знак ( + ) ставится между 2-мя Selector, например (A + B). Сначала, он ищет все элементы подходящие Selector 1 и получает результат 1, потом он ищет все "братские элементы моложе, которые находятся непосредственно после указанного элемента" (younger adjacent siblings) в результате 1 и подходит Selector 2 и получает результат 2. Результат 2 и есть ожидаемое.
Пример:
combinator-example7.css
a {
margin:5px;
font-size: 20px;
}
.menubar {
margin: 10px 0px;
padding: 5px;
border: 1px solid #ddd;
}
a:hover {
color: red;
font-weight: bold;
}
a:hover + a {
font-size: 80%;
font-style: italic;
color: black;
}
combinator-example7.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>CSS Adjacent Sibling combinator</title>
<link rel="stylesheet" type="text/css" href="combinator-example7.css" />
</head>
<body>
<h3>CSS Adjacent Sibling combinator</h3>
<a href="#">Top Link</a>
<div class="menubar">
<a href="#">CSS</a>
<a href="#">Javascript</a>
<a href="#">HTML</a>
<a href="#">Bootstrap</a>
<a href="#">jQuery</a>
</div>
</body>
</html>
Column Combinator: в процессе тестирования, нет поддерживающих браузеров.
*
