セレクタ #

CSSのセレクタについてを述べる。

セレクタにはいくつか種類があり、セレクタの基本的な最小単位のことをシンプルセレクタという。

種類にもよるが、シンプルセレクタを組み合わせたものもセレクタとしてCSSで利用できる。（できないパターンもある）

以下、シンプルセレクタの種類についてを示す。

タイプセレクタ #

要素名をそのままセレクタ名としたものをタイプセレクタという。タイプセレクタを利用すると、指定した要素名の要素全てにCSSの内容が適用される。

使用例

div { color: green}

セレクタの要素名を"*“にすると、全ての要素に適用される。このようなセレクタをユニバーサルセレクタという。

使用例

* { color: red}

先述のタイプセレクタ、ユニバーサルセレクタにおいて、ピリオド(.)の後にHTMLのclass属性の値を指定すると、そのclass属性の値を持つ要素が適用対象となる。このようなセレクタをクラスセレクタという。

使用例

span.address { color: blue}

タイプセレクタ、ユニバーサルセレクタにおいて、シャープ(#)の後にHTMLのid属性の値を指定すると、そのid属性の値を持つ要素がCSSの適用対象となる。このようなセレクタをIDセレクタという。

使用例

div#mean { color: gray}

タイプセレクタ、ユニバーサルセレクタにおいて、大かっこ([])の中に属性名や値を指定すると、その属性の値を持つ要素がCSSの適用対象となる。このようなセレクタを属性セレクタという。

属性セレクタの記法は以下のとおり。

[属性名]	・・	属性値に関係なく、その属性名が指定されている要素全て
[属性名="属性値"]	・・	その属性名に属性値(完全一致)が指定されている要素
[属性名~="属性値"]	・・	その属性名に属性値(含まれていればOK)が指定されている要素
[属性名^="属性値"]	・・	属性名の値がその属性値で始まっている要素
[属性名$="属性値"]	・・	属性名の値がその属性値で終わっている要素

使用例

a[href$=".pdf"] { color: red}

ある要素が特定の状態にある時のみを適用対象とするセレクタを擬似クラスという。使用するには、セレクタの要素名の後に続けて書く。

擬似クラスは多種類あるが、以下に一部を示す。

:link	・・	a要素で、リンク先にまだアクセスしていない場合
:visited	・・	a要素で、リンク先に既にアクセスしている場合
:hover	・・	マウスカーソルが上にある状態
:active	・・	マウスのボタンが押されている状態
:first-child	・・	子要素の中で一番最初の要素
:last-child	・・	子要素の中で一番最後の要素
:only-child	・・	唯一の子要素である場合
:focus	・・	フォーカス(選択)されたとき
:checked	・・	ラジオボタンやチェックボックスなどが選択されたとき
:empty	・・	要素内容が空の時
:target	・・	URLの最後が「#xxx」となっていた場合の、対象となっている要素
:lang(言語コード)	・・	HTMLのlang属性などで設定されている言語コードの言語が設定されている要素
:not(シンプルセレクタ)	・・	シンプルセレクタの対象外の要素

使用例

a:link { color: blue}

要素内容の一部のみをCSSの適用対象とするセレクタを擬似要素という。

主な擬似要素は以下の通り。

使用例

p::first-letter { color: red}

シンプルセレクタ同士を結合子と呼ばれるもので結びつけたものもセレクタとして機能する。

結合子及びその使用法は以下のとおり。

使用例

h1+p { color: red}