Ownedmedia ウェブ制作に役立つコンテンツを発信中!

コーディング 2015.04.23

ウェブサイトコーディングでよく使用するCSSセレクタのまとめ

Tags: ,
最終更新日:Update

ウェブサイトコーディングでよく使うHTMLタグとCSSプロパティに続いて、今回はCSSで登場するセレクタ名をまとめていきます。セレクタを活用することで、効率良く幅広いデザインをしていくことが可能になります。同じくウェブサイトコーディングでよく登場するセレクタにスポットを当てて紹介していきたいと思います。またCSSセレクタについてはCSS3に対応した内容で記載しています。

 

 

1. 全称・タイプ・クラスセレクタ
【ユニバーサルセレクタ】すべての要素に適用されます。
E 【要素セレクタ】E要素すべてに適用されます。
E.クラス名 【クラスセレクタ】指定したクラス名をもつ要素に適用されます。
E#id名 【idセレクタ】指定したid名をもつ要素に適用されます。

 

 

2. 子孫・隣接・複数セレクタ
E F 【子孫セレクタ】E要素の子要素・孫要素であるF要素すべてに適用される。
E>F 【子セレクタ】E要素の子要素であるF要素すべてに適用される。
E+F 【隣接セレクタ】E要素の直後にあるF要素一つに適用される。
E〜F 【間接セレクタ】E要素の後に登場するF要素すべてに適用される。
E,F 【複数セレクタ】E要素とF要素すべてに適用される

 

 

3. 属性セレクタ
E[foo] 【属性セレクタ】E要素のfoo属性のものに適用される。
E[foo=”bar”] 【属性値セレクタ】E要素のfoo属性かつ値がbarのものに適用される。

 

 

4. 擬似要素セレクタ
E::before 【::before擬似要素セレクタ】E要素の直前に要素を生成し適用させる。
E::after 【::after擬似要素セレクタ】E要素の直後に要素を生成し適用させる。
E::first-line 【::first-line擬似要素セレクタ】E要素の最初の1行に適用させる。
E::first-letter 【::first-letter擬似要素セレクタ】E要素の最初の1文字に適用させる。

 

 

5. 擬似クラスセレクタ
E:link 【:link擬似クラスセレクタ】E要素のリンク先が未訪問の時に適用される。
E:visited 【:visited擬似クラスセレクタ】E要素のリンク先が訪問済みの時に適用される。
E:hover 【:hover擬似クラスセレクタ】E要素にマウスカーソルが重なった時に適用される。
E:active 【:active擬似クラスセレクタ】E要素のリンク先をクリックした時に適用される。
E:focus 【:focus擬似クラスセレクタ】E要素の入力欄などにフォーカスされた時に適用される。
E:first-child 【:first-child擬似クラスセレクタ】ある要素に含まれる最初のE要素のみ適用させる。
E:last-child 【:last-child擬似クラスセレクタ】ある要素に含まれる最後のE要素のみ適用させる。
E:nth-child(n) 【:nth-child(n)擬似クラスセレクタ】ある要素に含まれる(最初から)n番目のE要素のみ適用させる。
E:only-child 【:only-child擬似クラスセレクタ】ある要素に含まれるE要素のみ適用させる。
E:not(F) 【:not擬似クラスセレクタ】E要素の中でF要素のみ適用させる。

 

 

今回はCSSのセレクタについてまとめてみました。セレクタはうまく使うことでCSSを簡略化につながり、後の編集がとても楽になります。ぜひ積極的に使っていきスマートなコーディングを心がけていきましょう。

 

 

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?