|
|
セレクタ { プロパティ:値 } /* (C1- ie3- N4-) */
セレクタ, セレクタ, セレクタ { プロパティ:値 } /* (C1- ie3- N4-) */
h1 {...} /* (C1- ie3- N4-) 要素 */
.myclass {...} /* (C1- ie3- N4-) クラス (HTML、XHTMLのみ) */
#myid {...} /* (C1- ie3- N4-) ID */
p.myclass {...} /* (C1- ie3- N4-) p要素のクラス (HTML、XHTMLのみ) */
p#myid {...} /* (C1- ie3- N4-) p要素のID */
A B {...} /* (C1- ie3- N4-) 子孫セレクタ */
結合子[ ][>][+]を持たない単純セレクタ「A」を祖先要素とする、単純セレクタ「B」。
a:link {...} /* (C1- ie3- N4-) リンク */
a:visited {...} /* (C1- ie3- N4-) 訪問済みリンク */
a:hover {...} /* (C2- ie4- N6-) ポイント時のリンク */
a:active {...} /* (C1- ie4- N6-) アクティブなリンク */
*.myclass {...} /* (C2- ie5- N6-) */ → .myclass {...} /* (C1- ie3- N4-) */
*#myid {...} /* (C2- ie5- N6-) */ → #myid {...} /* (C1- ie3- N4-) */
要素 {...} /* (C1- ie3- N4-) タイプセレクタ */
要素.クラス {...} /* (C1- ie3- N4-) クラスセレクタ(HTML、XHTMLのみ) */
要素#ID {...} /* (C1- ie3- N4-) IDセレクタ */
要素.クラス.クラス.クラス {...} /* (C2- ie5- N6-) マルチプルクラス(Multiple classes) (HTML、XHTMLのみ) */
p.uno.due.tre.quattro.cinque.sei.sette.otto.nove.dieci {...} /* C2- ie5- N6- (HTML、XHTMLのみ) */
A B {...} /* (C1- ie3- N4-) 子孫セレクタ */
A>B {...} /* (C2- N6-) 子供セレクタ */
A+B {...} /* (C2- N6-) 隣接セレクタ */
<要素A>
<要素B>
<要素B>こんにちは</要素B> /* 祖先要素A内のすべての要素Bが子孫 */
</要素B>
</要素A>
<要素A>
<要素B>こんにちは</要素B> /* 親要素A内に一階層だけネストする要素Bが子供 */
<要素B>こんにちは</要素B>
</要素A>
<要素>
<要素A>こんにちは</要素A>
<要素B>こんにちは</要素B> /* 親要素が同じで、要素Aの直後に続く要素Bが隣接 */
</要素>
div ol>li p {...} /* div要素の子孫であるol要素、その子供であるli要素の子孫であるp要素にマッチ */
要素:first-child {...} /* (C2- N6-) */
div > p:first-child {...}
というスタイルシートの記述は、
<div>
<p>こんにちは こんにちは こんにちは こんにちは
</div>
のp要素にマッチしますが、
<div>
<h1>あいさつ</h1>
<p>こんにちは こんにちは こんにちは こんにちは
</div>
のp要素にはマッチしません。
要素:link {...} /* (C1- ie3- N4-) リンク */
要素:visited {...} /* (C1- ie3- N4-) 訪問済みリンク */
要素:hover {...} /* (C2- ie4- N6-) ポイント時の要素 */
要素:active {...} /* (C1- ie4- N6-) アクティブな要素 */
要素:focus {...} /* (C2- N6-) 選択時の要素 */
:link {...} /* (C1- ie3- N4-) リンク */
:visited {...} /* (C1- ie3- N4-) 訪問済みリンク */
:hover {...} /* (C2- ie4- N6-) ポイント時の要素 */
:active {...} /* (C1- ie4- N6-) アクティブな要素 */
:focus {...} /* (C2- N6-) 選択時の要素 */
ページ全体のリンクを設定
a:link {...} /* リンク */
a:visited {...} /* 訪問済みリンク */
a:hover {...} /* ポイント時のリンク */
a:active {...} /* アクティブなリンク */
特定クラスが指定されているリンクの設定
a.クラス:link {...}
a.クラス:visited {...}
a.クラス:hover {...}
a.クラス:active {...}
特定クラスが指定された要素に含まれるリンクの設定
.クラス a:link {...}
.クラス a:visited {...}
.クラス a:hover {...}
.クラス a:active {...}
マウスが乗ったら下線と背景を表示
a:link {color:#0000ff; text-decoration:none}
a:visited {color:#0000ff; text-decoration:none}
a:hover {color:#006699; text-decoration:underline; background:#ddeeff}
a:active {color:#006699; text-decoration:underline; background:#ddeeff}
要素:lang(ja) {...} /* (C2-) */
要素[属性] {...} /* (C2- N6-) */
要素[属性="属性値"] {...} /* (C2- N6-) */
要素[属性~="属性値"] {...} /* (C2- N6-) */
要素[属性~="属性値"] {...} /* (C2- N6-) */
要素.クラス {...} /* (C1- ie3- N4-) (HTML、XHTMLのみ) */
.クラス {...} /* (C1- ie3- N4-) (HTML、XHTMLのみ) */
要素[属性|="属性値"] {...} /* (C2-) */
div[lang|="en"] {color:red} /* lang属性に[en]で始まる値[en][en-US][en-cockney]などを持つdiv要素にマッチ */
要素:first-line {...} /* (C1- ie55- N6-) */
要素:first-letter {...} /* (C1- ie55- N6-) */
要素:before {...} /* (C2- ie8- N6-) */
要素:after {...} /* (C2- ie8- N6-) */