CSSセレクター

よく使うセレクタをいくつかピックアップして覚えておこうと思う。

1.  *（すべての要素に適用）

* {
  font-size: 15px;
}

2.  .X（指定したクラス名がある要素に適用）

.btn {
  font-size: 15px;
}

3.  #X（指定したID名がある要素に適用）

クラスと違い、IDはhtmlの中で一度しか使用することができない。用途の違いとしてはページのある場所に飛びたい時などに使用される（いくつもあると問題なので）。

#top {
}

<a href="http://yamamoto.arkoak.com/?p=855#top">ページ先頭へ</a>

ページ先頭へ

4.  E   F（子、孫要素に適用）

要素Eの下にあるFに適用される。Fの下にある孫要素にも適用される。

5.  E > F（子要素のみに適用）

要素Eの下にあるFに適用される。Fの下にある孫要素には適用されない。

6.  n-th child()  （n番目の要素に適用）

複数の要素が並んでいるときに、番号を指定して適用させることができる。例えば表で一列目だけ色を変更したい場合は次のように記述する。

・HTML

  <table>
    <thead>
      <td><th>1</th><th></th></td>
    </thead>
    <tbody>
      <td><th>2</th><tr></tr></td>
    </tbody></pre>
 </table>

・CSS

tbody > th:n-th-child(1) {
  background: #999;
}

7.  E:before,  E:after（要素の前後に適用）

指定した要素の前後に適用される。例えば要素の前後に決まった単語などをつけたい時に使うことができる。

・CSS

div > h1:before,
div > h1:after {
  content: "-------------";
}

・HTML

<div><h1>参考文献</h1></div>

このように記述することで、毎回同じ文章を書く手間を省けくことができる。

w3school.comのwebページにてすべてのセレクタが参照できる。http://www.w3schools.com/cssref/css_selectors.asp