こんにちは！
UPSTARTSのSベンです！
今回はセレクタについての第二弾です。
前回とはまた違うセレクタの指定方法をやっていきます。
今回は以下のhtmlにスタイルをあてていきます。
|
1 2 3 4 5 6 7 8 9 |
<body> <h1>悪魔の実</h1> <div> <p>ロギア</p> <p class="strong">パラミシア</p> <p><span class="strong">ゾオン</span></p> <span>非能力者</span> </div> </body> |
a, b
まずa, bの形は、
同じスタイルを複数のセレクタに適応したい場合に使います。
h1とpを指定してみます。
|
1 2 3 |
h1, p { color: tomato; } |
このようにすると、h1とpの文字が赤くなります。
a b
次にa bの形は、
aの下にあるbという指定方法になります。
divの下のspanと指定してみます。
|
1 2 3 |
div span { color: tomato; } |
こうするとdiv要素の下にある、
span要素の文字が赤くなります。
a > b
次にa > bの形は先ほどのa bと少し似ていますが、
aの直下にあるbという指定方法になります。
divとspanを使い指定してみます。
|
1 2 3 |
div > span { color: tomato; } |
divの直下にあるspanは今回「非能力者」だけなので、
非能力者の文字だけ赤くなります。
a + b
次にa + bの形は、
aの次にくるbといった指定方法になります。
p要素を使い指定してみます。
|
1 2 3 |
p + p { color: tomato; } |
pの次に来るpなので、
「パラミシア」と「ゾオン」の文字が赤くなります。
ab
次にabの形は、
a要素でなおかつb要素といった指定方法になります。
classが付いているp要素を使い、指定してみます。
|
1 2 3 |
p.strong { color: tomato; } |
該当要素は「パラミシア」だけなので、その文字が赤くなります。
今回はセレクタの第二弾として、セレクタのより詳しいものを見ていきました。
次回はセレクタの第三弾「属性セレクタ」についてやっていきます。
ではまた次回！
