セレクタ

その他のセレクタ

子供セレクタ

子供セレクタとは,2つの要素名を大なり不等号(>)で区切ったものである.1つ目の要素名を親要素・2つ目の要素名を子要素と呼び,親要素の直接の子要素にのみCSSの効果が反映される.親要素に指定した要素の中に,直接の子要素として指定した要素があるときのみ,その子要素のデザインを変更できるが,直接の子要素でなく指定した要素があるときは,その子要素のデザインは変更できない.

CSSのテンプレート
親要素 > 子要素 { プロパティ: ; }
XHTMLのテンプレート
<親要素> 
<子要素>テキスト</子要素> 
</親要素> 

隣接セレクタ

隣接セレクタとは2つ以上の要素名をプラス(+)でつなげたものである.例えば要素αと要素βがあれば,要素βにのみ特定のスタイルを指定できる.

CSSのテンプレート
要素名α+要素名β { プロパティ: ; }
XHTMLのテンプレート
<要素名α>テキスト</要素名α>  
<要素名β>テキスト</要素名β> 

属性セレクタ

属性セレクタとは,要素名のあとに角括弧([])でくくった属性名を加えたセレクタであり,XHTML要素に付く属性によってデザインを変えたいときに用いる.

CSSのテンプレート
要素名[属性名] { プロパティ: ; }
XHTMLのテンプレート
<要素名 属性名="">テキスト</要素名> 

また要素名のあとに属性名と値角括弧([])でくくったものを加えることもでき,XHTML要素に付く属性と値によってデザインを変えたいときに用いられる.

CSSのテンプレート
要素名[属性名=""] { プロパティ: ; }
XHTMLのテンプレート
<要素名 属性名="">テキスト</要素名> 

全称セレクタ

全称セレクタとは,セレクタをアスタリスク(*)で表したものであり, 全ての要素にCSSの効果が反映される.

CSSのテンプレート
* { プロパティ: ; }

実際には,子孫セレクタと合わして,ある要素の中にある全ての要素にCSSの効果を反映させたい時などに用いる.

CSSのテンプレート
要素名 * { プロパティ: ; }