セレクタ : css

Tweet

Pocket

CSSのセレクタの種類についてまとめています。

タイプセレクタ

セレクタとしてHTML要素をとり、その要素にスタイルを摘要します。


p {
color: blue;
background-color: yellow; }

ユニバーサルセレクタ

セレクタとしてアスタリスク(*)をとり全てのHTML要素にスタイルを摘要します。


* {
color: blue;
background-color: yellow; }

ユニバーサルセレクタは,後方にclassセレクタ,idセレクタ,擬似セレクタ,擬似クラス,擬似要素のうちひとつでも伴う場合は省略できます。


*.reverse {
color: yellow:
backgrond-color: blue; }


.reverse {
color: yellow;
background-color: blue; }


上記2つの働きは同じです。両者ともclass属性reverseが指定されたHTML要素にスタイルが摘要されます。摘要要素が宣言されたプロパティに対応していない場合は,プロパティは無視されます。

classセレクタ

セレクタとしてHTML要素名にピリオドとclass名をつけて定義すします。定義されたスタイルは,セレクタとして記述された要素のうち同名のclass属性が指定されたものに摘要されます。


p {
color: blue;
background-color: yellow; }



p.reverse {
color: yellow;
background-color: blue; }


<p>文字色は黄色と背景色は青です。</p>
<p class="reverse">文字色と背景色が逆転します。</p>

下記の2つの違いは前者のスタイルがclass属性でreverseが指定されたp要素に限定されるのに対して、後者はclass属性としてreverseが指定されている全てのHTML要素にスタイルが適応される。

p.reverse {
color: yellow:
backgrond-color: blue; }


.reverse {
color: yellow;
background-color: blue; }

id(一意)セレクタ

セレクタとしてHTML要素の後に#(ナンバー、シャープ)とid名をつけて定義する。定義されたスタイルはセレクタに記述された要素のうちid属性で CSSに記述したid名が指定されているものに摘要される。classセレクタとの違いはclass属性が同一HTML文書内で複数回記述できるのに対してid属性は1度のみ記述できる点にある。