基本となる３つのセレクタでは、スタイルシートのセレクタの基礎についてお話させていただきました。今回は、少しだけ応用編という形で、前回の例をもとにセレクタをより具体的に指定する方法についてお話させていただきます。
セレクタには３つの基本となる書き方の他にもいろんな指定の仕方があります。例えば、前回の例、
<div id="blue"> <p class="red">ここの色を変えていくよ</p> </div>
「ここの色を変えていくよ」というテキストの色を変えたいときに、
.red{color:red;}
このようにclassセレクタを使ってテキストを赤くすることができました。これには別の指定の仕方もあります。例えば次のように書くこともできます。
p.red{color:red;}
手前に「p」が入っています。これは「p要素であり、かつ、redという名前のclass属性でもある要素」という意味です。次をご覧ください。
#blue .red{color:red;}
これは、「blueというid属性の子要素のredという名前のclass属性をもつ要素」という意味になります。このように親要素から子要素へ順番に記入することもできます。
上記の２つの例のように要素名やclass名を連続して記載するときには、ルールがあります。
間にスペースがない場合
「要素名.クラス名」といった形でスペースがない場合は「両者を満たす要素」という意味になります。例えば、p.red{color:red;}と記載した場合、「pかつ.red」ということになります。
間にスペースがある場合
「要素名 .クラス名」という形でスペースを間に入れると親子関係という意味になります。つまり、「要素名の子要素の中にあるクラス名」という意味です。これは住所を伝えるのに似ています。「杉並区」とだけ伝えるのか「東京都杉並区」と伝えるのか、結局は同じ地名を言っているのですが後者の方がより具体的な書き方なので想定外な場所にうっかりデザインが適用されるのを防ぐことができます。
先ほどの例で、
<div id="blue"> <p class="red">ここの色を変えていくよ</p> </div>
p .red{color:red;}
このように記載してしまうと、デザインが適用されなくなるのは分かりますか？これは「p要素の子要素の中にあるredというclass属性」になってしまうので、先ほどの例の場合は該当する要素がなくなってしまいます。だから、今回の例では間にスペースを入れてはいけません。
p.red{color:red;}
スペースを入れる場合は、下記のように親要素と子要素の間に入れます。
div p.red{color:red;}
もっと具体的に下記のようにid属性を入れることもできます。
div#blue p.red{color:red;}
セレクタは場所を細かく指定することで、デザインを適用させたい場所とさせたくない場所を明確に指定する効果があるという話を先ほどしましたが、その他にも同じ要素に対して異なる値のプロパティが指定されていた場合に、デザインを優先的に適用させる効果があります。
例えば、
p.red{color: blue;}
.red{color: red;}
このように.redに対してcolor: red;, color: blue;という異なる値が同時に指定されている場合、より具体的に指定されている方が勝ちます（この場合はblueの勝ち）。
スタイルシートの優先順位については下記も参照してみてください。
次の例はどうでしょう？
<div id="wrap"> <p class="red">ここの色を変えていくよ</p> </div> <p class="red">ここの色は変わるかな？</p>
このように「red」というクラスが２つあった場合、
.red{color:red;}
このようにclassのみで指定すると両方のテキストが赤くなります。仮に上のテキストだけを赤くしたいという場合、セレクタをどのようにしたらよいでしょう。
div#wrap p.red{color:red;}
このように親要素から指定してあげると、「ここの色を変えていくよ」だけが赤くなり「ここの色は変わるかな？」は変わりません。
ここでは、セレクタの基本的な仕組みを見ていただきました。この部分を正しく理解していないがために、スタイルシートが効いてくれないと悩んでいる初心者の方は意外と多いのではないでしょうか。もしも、普段からスタイルシートが言うことを聞いてくれなくて困っているという方は下記の記事を見ていただくと良いと思います。
