トップページ  > 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)とは、 要素や属性などの文書構造だけでは特定できない “要素の一部”を対象としてスタイルを適用するセレクタのことです。 例えば、要素の一行目や一文字目にスタイルを指定したり、 要素の前後にテキストや画像などを挿入することが出来ます。

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

<前へ 記事一覧へ 次へ>
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ