スポンサーサイト 

カテゴリ:スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

セレクタの組み合わせ 

カテゴリ:備忘録

セレクタとはCSSの書式においてスタイルの適用先を示す部分のことである。

HTML内の要素(いわゆるタグ)はそのままセレクタとすることが出来る。
body要素にスタイルを設定する場合にはbody{表示指定}というように記す。

HTML内にid="aho"と属性を設定しそれをスタイルの適用先とするのをidセレクタという。
スタイルシート内では#aho{表示指定}というように記す。

HTML内にclass="baka"と属性を設定しそれをスタイルの適用先とするのをクラスセレクタという。
スタイルシート内では.baka{表示指定}というように記す。

上記セレクタを半角スペースで区切って表記することで特定の適用先とすることが出来る。
これを子孫セレクタという。
例えばA B C{表示指定}と指定した場合、要素Aの中に含まれるB要素の中から要素Cにあてはまるものに対する指定ということになる。

この辺はどこでも書いてある基本なのだが、以外と陥りやすい罠もあったりするし、時にはもっと効率よく指定することができたりすることもある。

その為のルールについて


セレクタの先頭は必ず「要素名」もしくは「*」でなければならない。
(何かが後に続く場合*は省略できる)

続いてid名、クラス名、擬似クラスを任意の順で複数配置できる。
id="name"が指定されているa要素(<a href="www.yahoo.co.jp" id="name">)に未訪問のリンクを適用先とする場合、a#name:linkと書いてもa:link#idと書いても良い。
このような要素名、id名、クラス名、擬似クラスの組み合わせで構成されたセレクタをシンプルセレクタと呼ぶ。

シンプルセレクタを”>”で区切ると前のシンプルセレクタの直接の子孫である後のシンプルセレクタに対してスタイルを適用する。最後のシンプルセレクタが適用対象となる。
p > span > strong {text-decoration:underline;}
↑の例ではp要素の直接の子孫のspan要素の直接の子孫のstrong要素に対してスタイルを適用。

シンプルセレクタを”+”で区切ると両方のシンプルセレクタが同じ親要素をもち、前のシンプルセレクタの直後のシンプルセレクタに対してスタイルを適用する。
.aho {color:black;background-color:yellow;font-weight:normal;font-style:normal;}
p + .aho {text-decoration:underline;font-style:italic;}
↑は同じ親要素を持つp要素の直後のクラス名がex3の要素に対してスタイルを適用。この段落がスタイル適用対象。


この記事へのコメント

コメントをお寄せ下さい

(コメント編集・削除に必要)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。