« Daily Link 2006-12-23 | Note | Back To Blog Top | Daily Link 2006-12-26 | Note »
要素、クラス、セレクタなどのまとめ
XHTMLやCSSに限った話ではありませんが、専門用語というのは難しいものです。
同じ意味を持つ単語でも、人によって英語を使ったり日本語を使ったりするので、CSSの勉強を始めた頃はよく混乱しました。
そこで今回は、その辺りを再確認も含めてまとめなおしてみました。
別にクリスマスイブが暇だった訳じゃありませんよ。 決して！
XHTML
本や人によって、英語だったり日本語だったりするのがこちら。
覚えてしまえばどうって事無いんですけどね。
- 要素名(Element name)
で言うところのhtmlの部分。<html>
いわゆる『タグ』は、<>で囲んだ状態の物を言う。- 属性名(Attribute name)
のhrefやのsrcなど。<a href="#"> <img src="xxx.jpg">- 属性値(Attribute value)
の#やxxx.jpgなど。<a href="#"> <img src="xxx.jpg">
CSS-セレクタ（よく使われているもの）
説明不要だと思いますけど、一応。
現時点では、これらでCSSを記述している人が殆どだと思います。
- ユニバーサルセレクタ
* { color:red; }- 全ての要素に対するセレクタ。
- タイプセレクタ
h1 { color:red; }- 要素名のみで指定するセレクタ。 タグセレクタと呼ぶ人もいる気が。
- classセレクタ idセレクタ
#id { color:red; }
.class { color:red; }- XHTML側で、指定したclassとidが付いている要素に適用する。
CSS側ではclassは.を、idは#を頭に付ける。 - 子孫セレクタ
div p span { color:red; }- セレクタ同士を半角スペースで区切る事によって指定する。
これによりXHTML側の無駄なクラス付けが不要になったり、またCSS側を見た時に、対象の親子構造が解りやすくなる。
CSS-セレクタ（今後の為に覚えておきたいもの）
IE7の普及と共に、今後は使用頻度が高まっていくんじゃないかな、と勝手に予想しています。
IE6以下が無視する事を逆手にとって、Hack的に使用する事もあったり。
- 子セレクタ
blockquote>p { color:red; } <div> <p>11111111111111</p> <p>22222222222222</p> <blockquote><p>3333333333333</p></blockquote> </div>- 例を解説すると、『blockquoteの直接の子要素であるpの文字色を赤にする』となる。
例の場合、1と2はデフォルトカラーのまま。 - 隣接セレクタ(兄弟セレクタ)
p+p { color:red; } <div> <p>11111111111111</p> <p>22222222222222</p> <blockquote><p>3333333333333</p></blockquote> </div>- 例を解説すると、『pと隣接した（兄弟）pの文字色を赤にする』となる。
例の場合、2のみ赤になる。
CSS-属性セレクタ（覚えておくと幸せになれるかも）
ちょっとクセがあるセレクタです。
こちらもIE6以下が未対応なので、現時点では実用に向きません。
- 要素名[属性名]
p[class] { color: red; } <div> <p class="test">11111111111111</p> <p>22222222222222</p> <blockquote><p>3333333333333</p></blockquote> </div>- その属性名を持つ要素に対して適用する。
例では、1のみ赤になる IE6では非対応。 - 要素名[属性名="属性値"]
p[class="test"] { color: red; } <div> <p class="test">11111111111111</p> <p class="sample test">22222222222222</p> <blockquote><p>3333333333333</p></blockquote> </div>- 属性名と属性値が一致する要素に対して適用する。
例では1のみ文字色が赤になる。 IE6では非対応。 - 要素名[属性名~="属性値"]
p[class~="test"] { color: red; } <div> <p class="test">11111111111111</p> <p class="sample test">22222222222222</p> <blockquote><p>3333333333333</p></blockquote> </div>- ちょっと複雑。 XHTML側で属性値が複数指定されていても、該当すれば適用される。
つまり、例では1と2の文字色が赤になる。 - 要素名[属性値|="属性値"]
p[lang|="ja"] { color: red; } <div> <p class="test" lang="ja-osaka">11111111111111</p> <p class="sample test">22222222222222</p> <blockquote><p>3333333333333</p></blockquote> </div>- かなり特殊。 属性値が-（ハイフン）で区切られていても、属性値（ここではja）と前方一致で適用。
例では1のみ文字色が赤になる。
前方一致というのは、ja-osakaだけでなくjaにも適用される、という事。
主にlang属性に使用される、らしい。
言語コードとハイフンについてはlang=lang - 言語指定（とほほのＷＷＷ入門 内）を参考に。
擬似クラスと擬似要素
個人的に混同しやすいのがこの二つです。
クラスと要素の意味を考えれば分かるのですけど、パッと見だとどうしても、といった感じ。
どこかでこの二つを見た目で見分けやすくしよう、みたいな試みを見たのですけど、ソースを失念しました。 なんてこった（確か、:と::で分けるとかでした。 ご存知の方はコメントして頂けたら嬉しいです）。
追記2007年1月13日
::を使うのは、CSS3で擬似要素を使う場合でした。
- リンク擬似クラス
a:link,a:visited { color: red; } <ul> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Link</a></li> </ul>- ご存知リンク擬似クラス。
classセレクタなどと併用する事もできる。 - ダイナミック擬似クラス
a:active { color: black; } a:focus { background: yellow; } <ul> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Link</a></li> </ul>- こちらもリンクカラーを指定する際によく使う擬似クラス。
IE6では、a要素に対するhover以外非対応。
IE7では:focusが非対応。 - :first-child擬似クラス
p:first-child strong { color:red; } <div> <p><strong>111</strong>11111111111</p> <p><strong>222</strong>22222222222</p> <blockquote><p>3333333333333</p></blockquote> </div>- ちょっと複雑。 その要素の最初の要素のみに適用する。
解説すると、「最初のp要素のstrong要素の文字色を赤にする」となる。
つまり、例では1のstrong要素内のみ文字色が赤になる。 IE6は非対応。 - 言語擬似クラス
p:lang(ja) strong { color:red; } <div> <p lang="ja-osaka"><strong>111</strong>11111111<strong>111</strong></p> <p lang="en"><strong>222</strong>22222222222</p> <blockquote><p>3333333333333</p></blockquote> </div>- 要素名[属性値|="属性値"]と似ていて、言語コードで適用を判断する。 また、前方一致する点も同様。
例では1のstrong要素内のみ文字色が赤になる。 IE7も非対応。 - :first-letter擬似要素
p:first-letter { color:red; } <div> <p><strong>111</strong>11111111<strong>111</strong></p> <p><strong>222</strong>22222222222</p> <blockquote><p>3333333333333</p></blockquote> </div>- その要素の1文字目に適用する擬似要素。
例では123全ての1文字目のみ、文字色が赤になる。 - :first-line擬似要素
p:first-line { color:red; } <div> <p><strong>111</strong>11111111<strong>111</strong><br /> 11111111111111</p> <p><strong>222</strong>22222222222</p> <blockquote><p>3333333333333</p></blockquote> </div>- その要素の1行目に適用する擬似要素。
例では1の2行目のみ、文字色がデフォルトカラーのまま。 - :before擬似要素 :after擬似要素
blockquote p:before { content:"“" } blockquote p:after { content:"”" } <div> <p class="test"><strong>111</strong>11111111<strong>111</strong><br /> 11111111111111</p> <p><strong>222</strong>22222222222</p> <blockquote><p>3333333333333</p></blockquote> </div>- :before擬似要素と:after擬似要素は、contentプロパティと合わせてその要素の前後に何かの内容を生成する為に使う。
例では3の前後に引用符が表示される。 IE非対応。