【結合子】
CSSは、結合子を使用してセレクタを組み合わせることができます。
| 名前 | 説明 |
|---|---|
| 複数のセレクタ | 指定したすべてのセレクタ |
| 子孫セレクタ | セレクタAの要素内すべてのセレクタ |
| 子セレクタ | セレクタAに隣接する(同じ階層の直後にある)セレクタB |
| 隣接セレクタ | セレクタAの直後からすべてのセレクタB |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>結合子</title>
<style>
/*
・基本構文
セレクタA [結合子] セレクタB
※ 複数のセレクタはセレクタA,Bともに適用される。
それ以外は、セレクタBにのみ適用される。
*/
/* 複数のセレクタ - 指定したすべてのセレクタ */
h1, h2 {
font-size: medium;
}
/* 子孫セレクタ - セレクタAの１つ下の階層の以下すべてのセレクタB */
.combinator span {
color: darkred;
}
/* 子セレクタ - セレクタAの１つ下の階層のセレクタB */
.combinator > p {
color: cornflowerblue;
}
/* 隣接セレクタ - セレクタAに隣接する(同じ階層の直後にある)セレクタB */
.combinator + p {
background-color: darkred;
}
/* 間接セレクタ - セレクタAの直後にある以下すべてのセレクタB */
li ~ li {
background-color: red;
}
</style>
</head>
<body>
<h3>結合子</h3>
<h1>複数のセレクタA</h1>
<h2>複数のセレクタB</h2>
<!-- 子孫セレクタA・隣接セレクタA-->
<div class="combinator">
<span>子孫セレクタB</span>
<div>
<span>子孫セレクタB</span>
</div>
<ul>
<li>間接セレクタA</li>
<li>間接セレクタB</li>
<li>間接セレクタB</li>
</ul>
</div>
<p>隣接セレクタB</p>
<p>隣接しない要素</p>
</body>
</html>
[プレビュー]
