【結合子】

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>

[プレビュー]