スタイルシートでのセレクタ

◆スタイルシートでのセレクタ

カスケーディング・スタイルシートは、次のような規則の並びである。
セレクタ  { 宣言;  }
セレクタ, セレクタ, ..., セレクタ { 宣言;宣言;宣言;  }
セレクタは、{} の中の設定をどの範囲で有効にするかを決めるパタン である。以下に、セレクタの例を示す。
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: 2018/05/13 22:14:38
Yasushi Shinjo / <yas@cs.tsukuba.ac.jp>