それからデザイン スタッフブログ

二回目の今回はCSSの超基本、「CSSセレクター」についてまとめてみたいと思います。
さて、CSSといえば、今や大小問わず必ず必要不可欠となるものですね。

Web業界に携わっている身としては、CSSを触らない日は無いぐらい、当たり前のものですが・・・

HTML5とCSS3が登場した当初は、「IEで使えないから～」とか「IEが～」とか言われておりましたが、今やスマートフォンの普及や IE以外のブラウザのシェアの増加も伴い、プログレッシブエンハンスメント*　の考え方も一般的になってる様に感じます。

そこで、CSS3で新たに定義されたCSSも含めて、まずは基本のセレクターも含めてまとめてみたいと思います。

まずは、CSSの基礎的なことを復習します。

1.CSSの基礎知識

まず、この図解を解説すると、

Selector(セレクター）とは、CSSを適応させる要素を指定します。　つまり図解の例でいうと「h2」のタグに対してのスタイルである事がわかります。
続いて　Property（プロパティ）とは、実際にどんなスタイルを指定するかを設定します。図解の例でいうと、文字色を指定するプロパティを選択している事がわかります。
最後のValue（値）ですが、先に指定した、プロパティに対して【どれだけ】の指定をするかを設定します。
今回の図解でいうと、”h2のタグに対して文字色を～”何にするか、となるので値の所には、色コードを指定する事となります。

セレクターとは、スタイルを適応する対象を指定するモノとおぼえて頂ければと思います。

CSSセレクター一覧

• ユニバーサルセレクタ
  CSS

  * { color:red; }

  1 2 3

  * { color:red; }

  *（アスタリスク）で指定するセレクタです。これの意味は、全ての要素にプロパティを指定するという意味になり、上記コードの場合は、全ての要素の文字色を赤色にするとなります。 かつてはリセットCSSではよく使われていましたが、最近はあまり使われる事は少なくなってきています。
• タイプセレクタ
  p { color:red; }

  1 2 3

  p {   color:red; }

  よく使う度はかなり高いセレクタだと思います。上記の例でいうと、全てのpタグの要素の文字色を赤色にするという意味になります。

  HTML

  <p>この文字は適応される</p> <span>適応されない</span>

  1 2	<p>この文字は適応される</p> <span>適応されない</span>

   
• クラスセレクタ
  .sample { color:blue; } .sample.exp {...}/*　2　*/

  1 2 3 4

  .sample { color:blue; } .sample.exp {...}/*　2　*/

  こちらもよく使う度は無限大だと思いますが、.(ドット）+ 文字列で指定するセレクタとなります。
  上記の例でいえば、クラスsampleが指定されている要素の文字色を青にするという意味なります。
  クラス名に関しては、制約がいくつかあるものの自由に設定する事が可能です。

  1.命名は半角英数と記号のみで命名する

  2.最初の文字は、数字は使ってはいけない。

  3.大文字/小文字は区別される。

  HTML

  <div class="sample"> ここの文字列には適応される。 </div> <div class="Sample"> こちらには適応されない。 </div>

  1 2 3 4 5 6

  <div class="sample"> ここの文字列には適応される。 </div> <div class="Sample"> こちらには適応されない。 </div>

  上記のHTMLの場合、一見すると2つのdivに入っている文字が適応されるように見えますが、単語的には同じ意味ではありますが、 下段はSampleとなり頭文字が大文字の為適応されません。

• IDセレクタ
  CoffeeScript

  #sample { background-color:#ddd; }

  1 2 3

  #sample { background-color:#ddd; }

  こちらもよく使うセレクタですが、#（シャープ）+文字列で指定するセレクタです。 クラスと一緒同じ制約があり範囲ではあれば自由に命名できます。しかし、クラスセレクタとことなり　同一ページで使えるIDは1度きりとなります。 下記のHTMLソースのようなコーディングをした場合、上段のほうは背景色（#dddddd)が反映されるのに対して、下段の要素に関しては反映されません。 ※最近のモダンブラウザの場合は見た目を優先しているのか同一IDが複数存在してても、反映する場合がありますが、文法的にもセオリー的にもNGです。

  <div id="sample"> こちらには適当される。 </div> <div id="sample"> こちらには適当されない！ </div>

  1 2 3 4 5 6 7

  <div id="sample"> こちらには適当される。 </div>   <div id="sample"> こちらには適当されない！ </div>

   
• 子孫セレクタ
  CSS

  .sample p { color:green; }

  1 2 3

  .sample p { color:green; }

  子孫セレクタというと、なにそれ？！ってなりますが　前述している　クラス/IDセレクタ並に使っているセレクタです。

  下記のHTMLコードを見て頂くとわかりやすいかと思いますが、クラスsampleが親となりその中に入っている要素に適応するという意味になります。

  HTML

  <div class="sample"> <p>適応されます。</p> <div class="child"> <p>ここにも適応されます</p> </div> </div>

  1 2 3 4 5 6

  <div class="sample"> <p>適応されます。</p> <div class="child"> <p>ここにも適応されます</p> </div> </div>

  クラスsampleが親となり、その中に入ってるのが子供となります。 例でいうと、まずクラスsampleの中にpタグとdivタグが存在しており、更にdivの中に更にpが存在しています。 子孫セレクタなので、ざっくりいうと、指定した要素の中の要素に適応させるとなります。
• 子セレクタ
  CSS

  .box > p { color:red; }

  1 2 3

  .box > p {   color:red; }

  HTML
  <div class="box"> <h1>タイトル</h1> <p>適応される</p> <p>適応される</p> <div class="child"> <p>ここには適応されない</p> <p>ここには適応されない</p> </div> <p>適応される</p> </div>

  1 2 3 4 5 6 7 8 9 10

  <div class="box">     <h1>タイトル</h1>     <p>適応される</p>     <p>適応される</p>     <div class="child">         <p>ここには適応されない</p>         <p>ここには適応されない</p>     </div>     <p>適応される</p> </div>

  子セレクタとは、こちらも紐解いてみると結構わかりやすいです。 クラスboxの中の要素のpにスタイルを適応するというセレクタですが、こちらは孫要素には適応されないというものとなります。
• 兄弟セレクタ
  h1 + h2{ color:green;}

  1	h1 + h2{ color:green;}

  HTML

  <h1>タイトル</h1> <h2>適応される</h2> <p>文字列</p> <h2>適応されない</h2>

  1 2 3 4

  <h1>タイトル</h1> <h2>適応される</h2> <p>文字列</p> <h2>適応されない</h2>

  また聞きなれない、セレクタ名ですが隣接セレクタといったほうが分かりやすいかもしれません。 サンプルで説明すると、h1すぐ後に出てくるh2に対してスタイルを指定するというものとなります。
• 後方セレクタ　CSS3 こちらはCSS3から追加されたセレクタになります。 
  h1 ~ h2{ color:green;}

  1	h1 ~ h2{ color:green;}

  HTML

  <h1>タイトル</h1> <h2>適応される</h2> <p>文字列</p> <h2>適応される</h2> <div> <h2>適応されない！</h2> </div>

  1 2 3 4 5 6 7

  <h1>タイトル</h1> <h2>適応される</h2> <p>文字列</p> <h2>適応される</h2> <div>    <h2>適応されない！</h2> </div>

  正直兄弟セレクタににています！　兄弟セレクタの場合は、間に別のタグがありそれ以降は適応されないですが 後方セレクタはそれ以降も適応されていきますが但し、孫となる要素には適応されません。

CSS3で追加されたセレクタ

ここからはCSS3で追加されたセレクタをざっくりと紹介したいと思います。
IEの場合はIE9～のものとなりますので、IE9以下のブラウザでは対応していませんので、ご注意ください。

1.:first-letter

こちらは、pタグの最初の文字色を変えることができます。
CSS3追加とはいいましたが、実はこちらはIEで先行実装されており、古いIEでも使えるセレクタです。

2.:first-line

HTML

first-letterに似てますが、こちらは文字列の1行目にスタイルを適応するセレクタになります。
このサンプルでいうと、「毎日スゴく寒いです。」の箇所にスタイルが適応されます。

3.:first-child　/ :last-child

HTML

:first-child は　指定の子要素の最初の要素に対して、スタイルを適応するセレクタとなります。
:last-child はfirst-childの逆となり、一番最後の子要素に対してスタイルを適応させます。

4:nth-child(n)

HTML

first-childとlast-childに関しては、何となく単語でイメージができたと思いますが、このnth-childは何番目の子要素に対して スタイルを指定することができます。今回の例でいうと、三番目のliタグに対して文字色を指定しています。

HTML

このセレクタは、チェックボックスにチェックされた事によってスタイルを適応するセレクタとなります。
サンプルはチェックされたらラベルの文字色を赤色にするといった簡単なものですが、CSS3が登場する前はこれらの処理はJqueryなどを使って逐次監視しなくては 実現出来ませんでしたが、CSS3によりCSSだけでそれができるようになりました。

6.:enabled/:disabled

また変わり種ではありますが、enabled（有効）とdisabled（無効）といったものも追加されました。
この属性自体は、form要素等でしか指定できないのですが、これらを使う事でよりCSSの幅が広がると思います。

enabledに関しては有効　≒　デフォルト　と思って頂いても構いません。
逆にdisabledは無効と指定されている要素に対して適応ができます。

今回はCSS3のまとめという形で、使用頻度の高そうなものを選んでお届け致しましたが、クラスセレクタやjqueryなどを駆使することで 上で述べたCSSの記述を使わなくても同じような見た目にできるのですが・・・乱雑にCSSクラスが付加されていくというのは 個人的にはなんとも、気持ち悪いと思ったりしますし、今後もCMS等を使ったご納品も増えてきて なぜか、CMS側は別会社で行ってる為、それ用のクラス等が付けられない！といった事もあるかもしれません。
今回紹介したCSSを用いる事で、そういった自体に遭遇してもなんとか切り抜けられるかもしれません・・・・

ただ、レガシーブラウザ（IE9以下）等をどこまでカバーするかにもよるので、思惑通りに行かないのですがね・・・・（遠い目

それでは！