CSS #03 セレクタ②

  • このエントリーをはてなブックマークに追加
  • LINEで送る

 

こんにちは!
UPSTARTSのSベンです!

 

今回はセレクタについての第二弾です。

前回とはまた違うセレクタの指定方法をやっていきます。

 

今回は以下のhtmlにスタイルをあてていきます。

 

a, b

まずa, bの形は、

同じスタイルを複数のセレクタに適応したい場合に使います。

 

h1とpを指定してみます。

 

このようにすると、h1とpの文字が赤くなります。

 

a b

次にa bの形は、

aの下にあるbという指定方法になります。

 

divの下のspanと指定してみます。

 

こうするとdiv要素の下にある、
span要素の文字が赤くなります。

 

a > b

次にa > bの形は先ほどのa bと少し似ていますが、

aの直下にあるbという指定方法になります。

 

divとspanを使い指定してみます。

 

divの直下にあるspanは今回「非能力者」だけなので、
非能力者の文字だけ赤くなります。

 

a + b

次にa + bの形は、

aの次にくるbといった指定方法になります。

 

p要素を使い指定してみます。

 

pの次に来るpなので、
「パラミシア」と「ゾオン」の文字が赤くなります。

 

ab

次にabの形は、

a要素でなおかつb要素といった指定方法になります。

 

classが付いているp要素を使い、指定してみます。

 

該当要素は「パラミシア」だけなので、その文字が赤くなります。

 

 

 

 

今回はセレクタの第二弾として、セレクタのより詳しいものを見ていきました。

次回はセレクタの第三弾「属性セレクタ」についてやっていきます。

 

ではまた次回!


  • このエントリーをはてなブックマークに追加
  • LINEで送る