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テキスト
- テキスト
- テキスト
- テキスト
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
直下の子要素(子要素のみ)
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>
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>
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>
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セレクタで子要素の指定方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
