スタイルシートでのセレクタ
◆スタイルシートでのセレクタ
カスケーディング・スタイルシートは、次のような規則の並びである。
セレクタ { 宣言; }
セレクタ, セレクタ, ..., セレクタ { 宣言;宣言;宣言; }
セレクタは、{}
の中の設定をどの範囲で有効にするかを決めるパタン
である。以下に、セレクタの例を示す。
H1 { color:blue; } /* <H1></H1> だけ */
UL LI { color:blue; } /* <UL></UL>の中の <LI> だけ*/
OL > LI { color:blue; } /* <OL></OL>の直接の子供の <LI> だけ*/
H1 + P { color:blue; } /* <H1></H1>に隣接する <P> だけ*/
* { color:blue; } /* 全ての要素 */
.important { color:blue; } /* class="important" と指定したものだけ */
P.important { color:blue; } /* <P class="important"></P> と指定したものだけ */
#n10 { color:blue; } /* id="n10" と指定したものだけ */
P[LANG] { color:blue; } /* LANG属性を持つ<P></P>だけ。*/
P[LANG="en"] { color:blue; } /* LANG属性の値が "en" の<P></P>だけ。*/
P:first-line { color:blue; } /* <P></P> の中の最初の行だけ */
P:first-letter { color:blue; } /* <P></P> の中の最初の1文字だけ */
A:link { color:blue; } /* 未訪問のリンク */
A:visited { color:blue; } /* 訪問済みのリンク */
A:active { color:blue; } /* アクセス中 */
A:hover { color:blue; } /* カーソルを重ねた時 */
◆参考
Last updated: 2017/05/18 14:46:19
Yasushi Shinjo / <yas@cs.tsukuba.ac.jp>