【HTML5】セレクタ - 泣き虫の備忘録

セレクタとは、スタイルを適用する対象のこと

・セレクタに要素名を使用すると、その要素には全て同じスタイルが適用されます。

記述例

li { color : red ; }

ul { color : red ; }

* { color : red ; }

タイプセレクタ

・ある要素(エレメント)に対して共通のスタイルを適用するセレクタ

ユニバーサルセレクタ

・要素名に「*」を指定すると、全ての要素に対して同じスタイルが適用されること

タイプセレクタより細かい設定をするには

・クラスセレクタ（スタイルの適用対象の制限、特定の属性を持つ要素だけに適用）

・IDセレクタ（スタイルの適用対象の制限、特定の属性を持つ要素だけに適用）

クラスセレクタ

class属性名を指定してスタイルを適用する方法

・class属性は要素の分類名に当たるHTMLの属性であり、同一のclass属性を複数の要素で共有できます。

・事前にスタイルを指定しておき、後からclass属性によりスタイルを適用する場合に使用します。

記述例:クラスセレクタの指定

.specialnews{color: red ; }

クラスセレクタの記述例

<li class="specialnews">新入社員向けの研修の申込を開始しました</li>

id属性を指定してスタイルを活用する方法

・要素の固有名詞に当たるHTMLの属性

・同一のid属性を複数の要素で共有できない

・クラスセレクタとは異なり、IDセレクタは1つの要素のみで使用

記述例:IDセレクタの指定

#content { width : 900px; }

記述例:id属性によるid名の定義

・・・・・・・・

</div>

引用元