セレクタの種類(子孫セレクタ、子セレクタ)
クラスセレクタとの違いについて
まずは子孫セレクタと子セレクタの違いについて解説いたします。
子孫セレクタと子セレクタの違いについて
簡単なコードを元に考えていきます。
HTML:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<p>test1</p>
<div>
<p>test2</p>
</div>
<div>
<div>
<p>test3</p>
</div>
</div>
<p>test4</p>
</body>
</html>※上記のコードを表示
test1
test2
test3
test4
CSSにて子孫セレクタを記述
body p{
color: red;
}※上記の結果
test1
test2
test3
test4
子孫セレクタを使用すると、bodyタグ内のすべてのPタグに対して値が適用されることがわかります。続いて子セレクタを見てみましょう。
CSSにて子セレクタを記述
body>p {
color: red;
}※上記の結果
test1
test2
test3
test4
こちらは先程とは異なり、bodyタグの直下に配置されたPタグにのみ適用されていることがわかります。したがって、上記の指定はまったく異なるものであることが明らかになり、内容をしっかりと理解したうえ使用しデザインを形成する必要があります。
クラスセレクタとの違いを理解しましょう。
要素の後にスペースを入れるかどうかで、意味合いが変わります。
以下のコードを確認ください。
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<p>test1</p>
<p class="test">test2</p>
</body>
</html>
※上記のコードを表示
test1
test2
以下の子孫セレクタでCSSを適応した場合の挙動を考えて見ましょう。
body p.test{
color: red;
}
※上記の結果
test1
test2
こちらは子孫セレクタで記述しましたが、test1のPタグには適応されませんでした。原因は指定の仕方にあります。
【重要】
body p※bodyの中の全てのPタグを指定
body p.test※bodyの中のp.testというクラスセレクタのみ指定
body p test※bodyの中のPタグの中の全てのtestクラスを指定
上記の指定は別の指定になることに注意が必要です。
【統括】
子孫セレクタの注意点：
親要素と子孫要素を結びつけるために使用する。
スペースを使ってセレクタとセレクタをつなぐ。
ネスト構造を指定する際に使用するが、過剰な使用は避ける。
クラスセレクタの注意点：
クラス属性を指定するために使用する。
ピリオド（.）を使ってセレクタを指定する。
クラス名は他の要素と重複しないようにする。