クラスセレクタ

クラスセレクタ

簡単な用語の解説

クラスセレクタは要素のclass属性マッチングします。

class属性とはHTMLのほとんど全ての要素に記述できる属性で、はてなダイアリーでは<div class="day"></div>のように、様々な要素にclass属性が与えられています。

このclass属性マッチングするクラスセレクタは、現状CSSにおいて単純セレクタの次、あるいはそれ以上に使用頻度の高いセレクタです。

クラスセレクタは、要素名のあとにピリオド(.)をつけクラス名、という形で表現します。

div.day { border: solid 1px black }

上の例では、div要素のうちdayというclass属性を持つ全ての要素に幅1pxの黒い実線枠が表示されます。

またクラス名のみでセレクタを使用した場合には全称セレクタの省略とみなされ、指定したclass属性を有する全ての要素にマッチします。

 *.day { border: solid 1px black }
.day { border: solid 1px black }

上の例ではどちらも、dayというclass属性を持つ全ての種類の要素に幅1pxの黒い枠線が表示されます。

クラスセレクタについて

クラスセレクタは、勧告では属性セレクタの下位に位置づけられていますが、表記法の違いとその有用性から、ここでは属性セレクタの枠を超えたものとして扱っています。

Error : RSSが取得できませんでした。 Error : RSSが取得できませんでした。