トップページ  > CSSの基本  > セレクタの種類

★CSSの基本

■セレクタの種類

スタイルを適用する対象を指定するセレクタ(selector)には以下のものがあります。 ブラウザの種類やバージョンによって対応していない場合があるので注意してください。

セレクタ一覧表

名前 セレクタの書式 スタイルを適用する対象 使用例
要素型セレクタ要素名 要素名で指定した要素 p {color:blue;}
全称セレクタ* すべての要素* {color:blue;}
classセレクタ要素名.クラス名 クラス名を付けた要素p.sample {color:blue;}
idセレクタ要素名#id名 id名を付けた要素div#sample {color:blue;}
擬似クラス要素名:link 未訪問のリンク a:link {color:blue;}
要素名:visited 訪問済のリンク a:visited {color:blue;}
要素名:hover カーソルが乗っている要素a:hover {color:blue;}
要素名:active クリック中の要素a:active {color:blue;}
要素名:focus フォーカスされている要素input:focus {background:blue;}
要素名:lang 特定の言語を指定した要素 p:lang(en) {color:blue;}
要素名:first-child 要素内の最初の子要素 p:first-child {color:blue;}
擬似要素要素名:first-line 要素の最初の一行p:first-line {color:blue;}
要素名:first-letter 要素の最初の一文字p:first-letter {color:blue;}
要素名:before 要素の直前blockquote:before {content:"『";}
要素名:after 要素の直後blockquote:after {content:"』";}
属性セレクタ要素名[属性名] 特定の属性を持つ指定要素a[target] {color:blue;}
要素名[属性名= "属性値"] 特定の属性値を持つ指定要素a[target="_blank"] {color:blue;}
要素名[属性名~= "属性値"] 属性値候補と一致した要素p[class~="sample"] {color:blue;}
複数のセレクタセレクタ,セレクタ 複数のセレクタh1, h2 {color:blue;}
子孫セレクタセレクタ セレクタ 下の階層の子孫要素p strong {color:blue;}
子セレクタ セレクタ>セレクタ 直下の階層の子要素 p > strong {color:blue;}
隣接セレクタセレクタ+セレクタ 直後に隣接している要素h1 + p {color:blue;}

上記はCSS2までのセレクタ一覧です。 CSS3では、新しいセレクタが追加されているので、 参考にしてください。

CSS3より擬似要素に付けるコロン( : )が2つになって、疑似クラスとの違いが分かりやすくなっています。 ただし、コロン2つの記述方法は、IE8以前ではサポートされていないので、 これらの旧いブラウザを考慮するなら、疑似要素についてもコロン1つにしておいたほうが良いでしょう。

擬似クラス・擬似要素とは

疑似クラス(pseudo-classes)とは、 要素や属性などの文書構造だけでは特定できない “ある状況にある要素”を対象としてスタイルを適用するセレクタのことです。 例えば、最初の子要素やユーザーが操作中の要素などを対象にスタイルを適用することが可能になります。 ユーザー操作による状況変化に対してスタイルを適用できるため、ウェブページに動的な効果を与えることが出来ます。

一方、擬似要素(pseudo-element)とは、 要素や属性などの文書構造だけでは特定できない “要素の一部”を対象としてスタイルを適用するセレクタのことです。 例えば、要素の一行目や一文字目にスタイルを指定したり、 要素の前後にテキストや画像などを挿入することが出来ます。

擬似クラスと擬似要素の違いが分かりにくいですが、 疑似クラスは要素全体が対象になるのに対して、 疑似要素は要素の一部分だけが対象になる点が異なります。

<前へ 記事一覧へ 次へ>
▲ページ先頭へ
トップページ  > CSSの基本  > セレクタの種類
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ