ホーム(記事一覧)へ

CSSセレクタで子要素の指定方法

要素を指定するとき、いちいちクラスを指定するのはメンドウですし、htmlソースが無駄に多くなります。

子要素の指定方法を覚えるとクラスは最低限にできます。

CSSセレクタで子要素の指定方法を解説します。

子孫セレクタ(子要素以下全部)

E F

Eの子孫にあるすべてのF

親と子の間に半角スペースを入れます。

子要素はもちろん、孫やひ孫など子要素以下すべてが対象となります。

<style>
    .E li{color: red;}
</style>
                    
<ul class="E">
    <li>Fテキスト</li>
    <li>Fテキスト</li>
    <li>Fテキスト
        <ul><li>Fテキスト</li></ul>
    </li>
    <li>Fテキスト</li>
</ul>
<ul>
    <li>テキスト</li>
    <li>テキスト
        <ul><li>テキスト</li></ul>
    </li>
</ul>
  • Fテキスト
  • Fテキスト
  • Fテキスト
    • Fテキスト
  • Fテキスト
  • テキスト
  • テキスト
    • テキスト

直下の子要素(子要素のみ)

E>F

E直下の子要素F

親と子の間に > を入れます。>の前後には空白スペースがあってもなくても問題ありません。

子要素だけが対象となり、孫やひ孫などは非対象です。

<style>
    .E li{color: #333;}
    .E>li{color: red;}
</style>

<ul class="E">
    <li>Fテキスト</li>
    <li>Fテキスト</li>
    <li>Fテキスト
        <ul><li>テキスト</li></ul>
    </li>
    <li>Fテキスト</li>
</ul>
  • Fテキスト
  • Fテキスト
  • Fテキスト
    • テキスト
  • Fテキスト

子要素の1番目

子要素の指定方法は先に説明した「半角スペース」または「>」です。

ここでは「1番目」の指定方法について詳しく解説します。

子要素Fの一番目

E>F:first-of-type

E直下の子要素Fの一番目

「1番目」を指すには子要素Fに「:first-of-type」を付与させます。

これはFが1番目でない場合でも登場次第効きます。

Fが1番目のとき

<style>
    .E>p:first-of-type{color: red;}
</style>

<div class="E">
    <p>最初はp</p>
    <p>2番目はp</p>
    <p>3番目はp</p>
</div>

最初はp

2番目はp

3番目はp

Fが1番目以外のとき

<style>
    .E>p:first-of-type{color: red;}
</style>

<div class="E">
    <div>最初はdiv</div>
    <p>2番目はp</p>
    <p>3番目はp</p>
</div>
最初はdiv

2番目はp

3番目はp

子要素一番目がFなら

E>F:first-child

E直下の子要素一番目がFなら

「1番目」を指すには子要素Fに「:first-child」を付与させます。

これはFが1番目でない場合は効きません。

1番目がFのとき

<style>
    .E>p:first-child{color: red;}
</style>

<div class="E">
    <p>最初はp</p>
    <p>2番目はp</p>
    <p>3番目はp</p>
</div>

最初はp

2番目はp

3番目はp

1番目がF以外のとき

<style>
    .E>p:first-child{color: red;}
</style>

<div class="E">
    <div>最初はdiv</div>
    <p>2番目はp</p>
    <p>3番目はp</p>
</div>
最初はdiv

2番目はp

3番目はp

子要素一番目(なんでも)

E>*:first-child

E直下の子要素の一番目

「1番目」を指すには子要素Fに「:first-child」を付与させます。

「*」を指定することでなにが子要素の1番目でも指定できます。

pが1番目のとき

<style>
    .E>*:first-child{color: red;}
</style>

<div class="E">
    <p>最初はp</p>
    <p>2番目はp</p>
    <p>3番目はp</p>
</div>

最初はp

2番目はp

3番目はp

divが1番目のとき

<style>
    .E>*:first-child{color: red;}
</style>

<div class="E">
    <div>最初はdiv</div>
    <p>2番目はp</p>
    <p>3番目はp</p>
</div>
最初はdiv

2番目はp

3番目はp

ちなみに「*」がなくても効きます。

.E>:first-child{color: red;}
.E :first-child{color: red;}

セレクタの指定方法はまだまだたくさんあります。

下記を参考にしてみてください。

【まとめ】子要素の指定方法

子孫セレクタ(子要素以下全部)

E F

直下の子要素(子要素のみ)

E>F

子要素Fの一番目

E>F:first-of-type

子要素一番目がFなら

E>F:first-child

子要素一番目(なんでも)

E>*:first-child

以上、CSSセレクタで子要素の指定方法でした。

関連記事