【CSSリファレンス】セレクタ

こんにちは（・∀・）

CSS2.1までのセレクタ一覧です。

CSS3セレクタについてはこちらをご覧ください。
【CSSリファレンス】CSS3セレクタ

1. ユニバーサルセレクタ

*

* {
}

ユニバーサルセレクタは全称セレクタとも呼ばれ、すべての要素に対して指定することができます。一括ですべての要素に指定することもできますし、他の要素と組みあわせて使うこともできます。

サンプル

* {
  margin: 0;
  padding: 0;
}

他の要素と組み合わせて使うこともできます。

div * {
	color: #d577ab;
}

次のように書くこともできます。

div *:first-child {
}
div :first-child {
}

上記の場合アスタリスク(*)がなくても同じ結果を返します。

2. タイプセレクタ

E要素

E {
}

タイプセレクタはCSS1で定義されたセレクタの一つです。

サンプル

h1 {
  color: #4776AF;
}
div {
  color: #d577ab;
}

このように各要素ごと指定していきます。

3. 子孫セレクタ

E要素 F要素

E F {
}

HTMLは構造上要素の中に要素をいれてさらに入れて…のように入れ子の構造で作っていきます。CSS1で定義された子孫セレクタとはそれら要素(タイプセレクタ)の親子関係を元にしてCSSで指定していくことができます。

サンプル

div p {
  color: #4776AF;
}
div #main a {
  color: #d577ab;
}

要素と要素の間は半角スペースで区切ります。

上記サンプルの一つ目はdiv要素の中のp要素にだけCSSを適用させることができます。二つ目はdiv要素の中の#mainの中のa要素にだけCSSを適用させることができます。

4. クラスセレクタ

.main

.main {
}

クラスセレクタとは、ピリオド(.)のあとに任意の文字列で作るセレクタのことです。次に掲げる文字列を使用することができます。

• アルファベット(a～z、A～Z)
• 数字(0～9)
• ハイフン(-)、アンダーバー(_)
• その他Unicodeの文字符号や数値符号、エスケープされた文字列記号など

書き方は必ずアルファベット(a～z、A～Z)から開始します。また、CSSでは大文字小文字の区別はしません。mainもMainもMAINも同じとみなします。

サンプル

.main {
  color: #d577ab;
}
div.main {
  color: #4776AF;
}

クラスセレクタは一つのページ内でいくつでも使うことができます。div.mainは、属性セレクタ(属性セレクタは後ほど解説します)でdiv[class="main"]またはdiv[class~="main"]と同じ意味になります。

<div class="main">
<p>クラスセレクタの使い方。</p>
</div>
<div class="main contents">
<p>クラスセレクタの使い方。</p>
</div>

クラスセレクタは半角スペースで区切って複数指定することができます。

div[class="main"]またはdiv[class~="main"]の違いですが、div[class~="main"]は複数の値がスペースで区切られて設定されている属性の場合使用します。

See the Pen dMNpXX_css-selector_demo9 by Webデザインラボ (@webdlab) on CodePen.

Resultをクリックしてご覧いただくとわかると思いますが、クラスを複数してあるとdiv[class~="main"]で指定しないとCSSが効いていないことがわかります。

5. IDセレクタ

#main

#main {
}

IDセレクタとは、シャープ(#)のあとに任意の文字列で作るセレクタのことです。次に掲げる文字列を使用することができます。

• アルファベット(a～z、A～Z)
• 数字(0～9)
• ハイフン(-)、アンダーバー(_)
• その他Unicodeの文字符号や数値符号、エスケープされた文字列記号など

書き方は必ずアルファベット(a～z、A～Z)から開始します。また、CSSでは大文字小文字の区別はしません。mainもMainもMAINも同じとみなします。

サンプル

#main {
  color: #d577ab;
}
div#main {
  color: #d577ab;
}

div#mainは、属性セレクタでdiv[id="main"]と同じ意味になります。

<div id="main">
<p>IDセレクタの使い方。</p>
</div>
<div id="main"><!--上でid="main"は既に使っております。同一ページ(HTML)内で同じIDは使えません。-->
<p>IDセレクタの使い方。</p>
</div>

IDセレクタは一つのページ内で一つしか使うことができません。

6. 子セレクタ

E > F

E > F {
}

子セレクタは親要素の直接の子要素にのみ適用させることができます。なので孫要素までその適用は及びません。親要素と子要素の間を大なり(>)でつなぎます。前後に半角スペースを入れることもできます。

サンプル

See the Pen xVgzVq_css-selector_demo6 by Webデザインラボ (@webdlab) on CodePen.

この場合、親要素#mainの子供.sampleにCSSを適用させます。孫セレクタにはCSSが効いてないことがわかります。

7. 隣接セレクタ

E + F

E + F {
}

隣接セレクタは要素と要素が直接隣接している場合にのみ適用させることができます。なので要素と要素の間に別の要素が入ってしまうとCSSを適用されることはありません。同じ親要素のもと、先に書かれた要素が兄、後から書かれた要素ば弟となります。間に別の要素が入ってしまっても兄弟であることは変わりませんが、隣接セレクタでCSSを適用することはできなくなります。兄要素と弟要素の間をプラス(+)でつなぎます。前後に半角スペースを入れることもできます。

サンプル

See the Pen xVgzOd_css-selector_demo7 by Webデザインラボ (@webdlab) on CodePen.

この場合、兄div要素の弟ul要素にCSSを適用させます。

下のサンプルは途中に別の弟がいるので、ul要素は直接の弟にはならず、CSSを効かせることはできません。この場合の直接の弟はol要素になります。

8. 属性セレクタ

E[foo]

E[foo] {
}

fooという属性が設定されているE要素に適用します。

サンプル

See the Pen aNpKRV_css-selector_demo8-1 by Webデザインラボ (@webdlab) on CodePen.

title属性が指定されているdiv要素にCSSが適用されます。

See the Pen VaPKjK_css-selector_demo8 by Webデザインラボ (@webdlab) on CodePen.

上記サンプルはclass属性とid属性が指定されているdiv要素に適用されます。両方指定してあるE要素にだけCSSを適用します。

9. 属性セレクタ

E[foo="bar"]

E[foo="bar"] {
}

この属性セレクタは、fooという属性が設定されていて値がbarのE要素に適用されます。

サンプル

See the Pen xVgzyp_css-selector_demo9 by Webデザインラボ (@webdlab) on CodePen.

　type="submit"の属性と値を持つinput要素に適用されます。

10. 属性セレクタ

E[hreflang|="en"]
E[lang|="en"]

E[hreflang|="en"] {
}
E[lang|="en"] {
}

この属性セレクタは、hreflang|またはlang|という属性が設定されていて、値がハイフン(-)で区切られ、さらにそのハイフン(-)の前が一致しているE要素に適用されます。

サンプル

See the Pen EKZRrb_css-selector_demo10 by Webデザインラボ (@webdlab) on CodePen.

サンプルではlang="en"の属性と値を持つp要素、lang="en-US"の属性と値を持つp要素、同じくhreflang="en"の属性と値を持つa要素、hreflang="en-US"の属性と値を持つa要素にCSSが適用されます。

11. リンク擬似クラス

E:link
E:visited

E:link {
}
E:visited {
}

未訪問のリンクにはE:link、訪問済みのリンクにはE:visitedが適用されます。

サンプル

See the Pen aNpKXE_css-selector_demo11 by Webデザインラボ (@webdlab) on CodePen.

サンプルでは未訪問のリンクは文字色がピンクに、訪問済みのリンクは文字色が黄色になります。

12. ダイナミック擬似クラス

E:active
E:hover
E:focus

E:active {
}
E:hover {
}
E:focus {
}

:hoverは指定した要素にカーソルを重ねるとCSSが適用されます。:activeは指定した要素をクリックしてから放すまでの間にCSSが適用されます。:focusは指定している要素にフォーカスされている場合にCSSが適用されます。キーボードのTabキーを使用して移動した場合適用されます。

サンプル

See the Pen rejKgz_css-selector_demo12 by Webデザインラボ (@webdlab) on CodePen.

:hoverは要素にカーソルを乗せると背景色がグレーになります。:activeは要素をクリックして放すまでの間文字の色が赤くなります。:focusはフォーカスされている間青色のボーダーがでます。

リンク疑似クラスとダイナミック疑似クラスを併用する場合、指定する順序に注意する必要があります。

1. :link
2. :visited
3. :hover
4. :active

:link、:visited、:hover、:activeの順に指定してください。

a:link {
}
a:visited {
}
a:hover {
}
a:active {
}

13. 言語擬似クラス

E:lang()

E:lang() {
}

言語擬似クラスは要素に指定してあるlang属性の値が一致した場合にCSSが適用されます。ハイフン(-)区切りでの指定があった場合も前方一致でCSSが適用されます。属性セレクタのE[hreflang|="en"]と意味はほぼ同じです。

サンプル

See the Pen eZgKwE_css-selector_demo13 by Webデザインラボ (@webdlab) on CodePen.

lang="en"の属性と値を持つp要素、lang="en-US"の属性と値を持つp要素、同じくhreflang="en"の属性と値を持つa要素、hreflang="en-US"の属性と値を持つa要素にCSSが適用されます。

14. first-child擬似クラス

E:first-child

E:first-child {
}

first-child擬似クラスは、ある親要素の中の最初に書かれた子要素にCSSが適用されます。

サンプル

See the Pen rejKEG_css-selector_demo14 by Webデザインラボ (@webdlab) on CodePen.

:first-childを指定したli要素にCSSが適用されます。サンプルでは最初のli要素のborder-topがなくなりました。

15. first-line擬似要素

E:first-line

E:first-line {
}

first-line擬似要素は、指定した要素の一行目にCSSが適用されます。ブロックレベル要素にだけ有効です。なお適用されるのはフォント・テキスト関連、background関連、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height、text-shadow、clearのプロパティになります。

サンプル

See the Pen dMNjyw_css-selector_demo15 by Webデザインラボ (@webdlab) on CodePen.

:first-lineを指定したp要素の一行目にCSSが適用されます。サンプルでは最初の一行目の色が変わって文字が大きくなりました。

16. first-letter擬似要素

E:first-letter

E:first-letter {
}

first-letter擬似要素は、指定した要素の一文字目にCSSが適用されます。ブロックレベル要素、list-item、table-cell、table-caption、およびインラインブロック要素にだけ有効です。なお適用されるのはフォント・テキスト関連、background関連、text-decoration、vertical-align(floatがnoneの時のみ)、text-transform、line-height、margin関連、padding関連、border関連、float、text-shadow、clearのプロパティになります。

サンプル

See the Pen ZWLjbX_css-selector_demo16 by Webデザインラボ (@webdlab) on CodePen.

:first-letterを指定したp要素の一文字目にCSSが適用されます。サンプルでは最初の一文字目の色が変わって文字が大きくなりました。

17. :before擬似要素

E:before

E:before {
}

:before擬似要素は、contentプロパティと組み合わせて使用します。指定した要素の前に指定した内容を表示します。

サンプル

See the Pen jqypWy_css-selector_demo17 by Webデザインラボ (@webdlab) on CodePen.

:beforeを指定したp要素の最初にcontentで指定した内容が挿入されます。

18. :after擬似要素

E:after

E:after {
}

:after擬似要素は、contentプロパティと組み合わせて使用します。指定した要素の後ろに指定した内容を表示します。

サンプル

See the Pen PNWBNw_css-selector_demo18 by Webデザインラボ (@webdlab) on CodePen.

:beforeを指定したp要素の最初と:afterを指定したp要素の最後にcontentで指定した内容が挿入されます。

CSS2.1以前で追加されたセレクタは以上になります。

関連リンク

【CSSリファレンス】セレクタCSS3