きまぐれ引きこもりんご80%

セレクタの便利な使い方

web制作

セレクタの使い方

擬似クラス 、擬似要素 、属性セレクタを使いこなそう

擬似クラス 、擬似要素 、属性セレクタを上手に使うと、無駄なidやclass属性を減らすことが出来ます。
下記一覧は私がセレクタを覚える時に使用していたものなので、説明部分など分かりにくいと思いますが、最低限覚えておきたいものとしてチートシート程度に参照いただければと思います。

擬似クラス

a:link {プロパティ: 値}  /* 通常のリンク */
a:visited { }  /* 訪問済みリンク */
a:hover { }  /* オンマウス時 */
a:focus { }  /* 選択時 */
a:active { }  /* アクティブ時 */
※上記は並び順を守ること

li:first-child { }  /* 最初 */
li:last-child { }  /* 最後 */
li:nth-child() { }  /* 何番目(2n+1などの表現も可)*/
li:nth-child(odd) { }  /* odd奇数、even偶数 */
li:nth-last-child() { }  /* 最後から数えて何番目 */
li:only-child { }  /* ひとつだけの子要素 */

p:first-of-type { }  /* pの最初 */
p:last-of-type { }  /* pの最後 */
p:nth-of-type() { }  /* pの何番目 */
p:nth-last-of-type() { }  /* pの最後から何番目 */
p:only-of-type { }  /* 子要素の中で唯一のp要素 */

p:not(:last-child) { } /* ()以外 */
p:empty { }  /* 空要素選択 */
p:enabled { }  /* 有効 */
p:disabled { }  /* 無効 */
p:checked { }  /* チェックされた */

:target { }  /* href="#" */
:lang { }  /* lang属性 */
:root { }  /* =<html> */

擬似要素

p::first-line { }  /* 最初の一行 */
p::first-letter { }  /* 最初の文字 */
p::before {content: "入れたい内容";}  /* ""内はurl()も可 */
p::after {content: "入れたい内容";}
p::selection { }  /* ドラッグした選択範囲の表現 */

属性セレクタ

a[href^="http"] { }  /* httpで始まる */
a[href$=".com"] { }  /* comで終わる */
a[href*=".co.jp"] { }  /* .co.jpを含む */

擬似クラスと擬似要素の違いについて

擬似クラスは指定した要素全体をスタイリングします。通常のセレクタでは指定できないものも選択することができるので便利です。セレクタには:(シングルコロン)を使用します。
擬似要素は要素の前後や一文字目、一行目など、要素の一部をスタイリングします。セレクタにはCSS3から::(ダブルコロン)を使用します。IE8以前ではダブルコロンに対応していないのでシングルコロン使用をよく見かけるのですが、IE8対応を考えないのであればダブルコロンにすべきなのか・・・、おっさんにはわかりません。

基本は大切

順序が前後しましたが、セレクタの基本をしっかりとおさえておきましょう。
タイプセレクタ、classセレクタ、idセレクタをベースに、セレクタを区切る記号を少し覚えるだけでスタイリングのスキルがぐんと上がります。

  • 子孫セレクタ …「半角」区切り 親以下全てに影響
  • グループセレクタ …,(カンマ)区切り
  • 子セレクタ …>区切り 直下だけ、孫以降には影響しない
  • 隣接セレクタ …+区切り 隣り合う次の要素
  • 間接セレクタ …~区切り 兄弟間で指定した要素以降
  • 全称セレクタ(ユニバーサルセレクタ) …*

全称セレクタは使い方によっては

article * p {  }

のようにするとarticle直下のpを無視して、*以下のp(articleの孫)をスタイリングのように便利な使い方もあります。
しかしリセットcssには、全称セレクタを用いるとレンダリングが遅くなるなどの理由で最近はあまり使われていないようです。

CSSセレクタを使いこなそう

CSSはCascading Style Sheet(カスケーディング・スタイル・シート)の略です。
(cascade=繋げる)
要するにセレクタを繋げてスタイリングしていくっていうことですね。「優先順位」「上書き」の特性をうまく使いながら、グループセレクタでスタイリングした後にピンポイントのセレクタで上書きしたり、ほかのスタイルをプラスしたりと、セレクタを上手に使いこなせるようになるとコーディングが大分楽になりますね。