現在CSS復習中です。コーディング技術を学ぶのに、最も良い方法は人のソースコードを見て参考にして自分で書いてみることです。（ついついコピペしちゃうこともありますが・・・）

CSSやHTMLほど参考書類がネット上に落ちてる物ってないんじゃないですかね？なんせ、大抵のサイトはソースコードが見れますからね。そんな、人様のサイトを見ていると、記述のクセというか、こだわりというか、そういう部分も見れてすごく楽しいです(・∀・)

はっきり言って、僕はCSSのセレクタを全て理解できていません。人様のソースコードを見ていると、それが実感できます(´ﾟдﾟ｀)

なので今回は、過去に「何だコレ？？？」って思ったCSSセレクタと、なにげに使っていた物をまとめて復習しようと思います。

AA BB　※階要素セレクタ(子孫要素セレクタ)

オーソドックな記述の仕方ですね。「AA」が親として、その下の階層の「BB」を子要素として全てにCSSプロパティが反映されます。

サンプルコード

div p a{color:#ff0000;}
 

<div>
     <p><a href="#">ここが赤くなる</a></p>
     <p><strong><a href="#">ここも赤くなる</a></strong></p>
     <p><span><a href="#">ここも赤くなる</a></span></p>
     <ul>    
          <li><p><a href="#">ここも赤くなる</a></p></li>
     </ul>
<a href="#">ここは赤くならない</a>
</div>

サンプルコード
＜div＞の中に入っている＜p＞の中に入れ子(子孫)に入っている＜a＞に適用されます。
ブロックごとに要素を設定できるので、いちいち「class」や「id」を一つづつにつけなくていいので便利です。

AA > BB　※子要素セレクタ

今回、このブログを書こうと思ったきっかけのセレクタです。「AA」と「BB」の間に「＞(大なり)」を入れることによって子要素にのみ適用されます。孫要素には適用されません。

サンプルコード

/**先ほどの子孫要素セレクタと一緒！！*/
div p > a{color:#ff0000;} 

<!--先ほどの子孫要素セレクタと一緒！！-->
<div>
     <p><a href="#">ここが赤くなる</a></p>
     <p><strong><a href="#">ここも赤くなる</a></strong></p>
     <p><span><a href="#">ここも赤くなる</a></span></p>
     <ul>    
          <li><p><a href="#">ここも赤くなる</a></p></li>
     </ul>
<a href="#">ここは赤くならない</a>
</div>

サンプルコード
先ほどの子孫要素セレクタと比べると違いがよくわかりますね。
＜p＞に直接かかっている要素にのみ適用されます。＜strong＞や＜span＞が＜p＞の中に入っている場合、＜a＞は孫になるため、適用されません。

子要素セレクタ、子孫要素セレクタの使い分け

コードを書き進めていくと、先に書いていた子孫要素が暴走して適用されてしまうことが多々あります。あとに書いた要素を適用させるために「important!」を連発するのもいかがなものかと思います。きちんとしたCSSコードは上から下に順番に適用されるのが基本です。「子要素セレクタ」と「孫要素セレクタ」をうまく使い分けて、綺麗なコードを書きたいものです。

AA + BB　※隣接要素セレクタ

「AA」と「BB」の間に「+(プラス)」を入れることによって、隣接している要素に適用されます。

サンプルコード

div p + a{color:#ff0000;} 

<div>
<p><a href="#">【1】ここは赤くならない</a></p>
<a href="#">【2】ここが赤くなる</a><br/>
<a href="#">【3】ここは赤くならない</a>
</div>

サンプルコード
この場合、＜p＞に隣接している＜a＞は【2】のリンクなので、そこだけCSSが適用されてます。

AA ~ BB ※関節要素セレクタ（後にある要素に適用）

関節要素セレクタはCSS3から追加されたセレクタです。「AA」と「BB」の間に「~(チルダ)」を入れることによって、隣接している要素に適用されます。

サンプルコード

div p ~ a{color:#ff0000;} 

<div>
<p><a href="#">【1】ここは赤くならない</a></p>
<a href="#">【2】ここが赤くなる</a><br/>
<a href="#">【3】ここが赤くなる</a>
<p><a href="#">【4】ここは赤くならない</a></p>
<a href="#">【5】ここが赤くなる</a>
</div>

サンプルコード
隣接要素と違うのは、後ろにある要素なら無数に適用される点ですかね。
このサンプルでは、「何ができるの？」となってしまいますが・・・見出しタグの2番目以降の「magin」の調整などに使い勝手が良さそうです。

まとめ

今回は基本的な、CSSセレクタをまとめました。この後は「属性セレクタ」や「擬似クラス」や「擬似要素」をまとめていこうと思います。何気に書いているのと、意味をわかって書いているのでは、作業効率が違うと思いますので、最低限のCSSセレクタを理解した上でコーディング作業をして行こうと思う今日このごろ、本日はこの辺で。以上、＠Kc_fujiでしたm(_ _)m