CSSセレクタ第2部

サブセレクタ

.class1 > p {color: red;}

<div class="class1">
    <p>자식</p>
    <div>
        <p>손자</p>
    </div>
    <p>자식</p>
</div>

子孫選択者

.class1 p {color: red;}

<div class="class1">
    <p>자식</p>
    <div>
        <p>손자</p>
    </div>
    <p>자식</p>
</div>

兄弟選択者

h1 ~ h2 {color: red;}

<h2>형제0</h2>
<h1>형제1</h1>
<h2>형제2</h2>
<h2>형제3</h2>
<h2>형제4</h2>

隣接する兄弟セレクタ

h1 + h2 {color: red;}

<h1>형제1</h1>
<h2>형제2</h2>
<h2>형제3</h2>
<h2>형제4</h2>

バーチャルクラスセレクタ

:pseudo-class {
    property: value;
}

input:focus { background-color: red; }

<input type="text" placeholder="focus me">

仮想要素セレクタ

::pseudo-element {
    property: value;
}

h1::before {
    content: 'Hello';
    color: red;
}

<h1>world</h1>

Reference