Scrapbox

*（アスタリスク）

すべての要素にスタイルを適用させます。

* {line-height:120%;}

要素名

指定した要素名の要素にスタイルを適用させます。

p {text-indent:1em;}

要素名#名前

その要素の中で、指定したid属性の名前（識別子）を持つものにスタイルを適用させます。名前は識別子なので固有のものにします。

img#sitelogo {border:double orange 4px;}

要素名.クラス名

その要素の中で、指定したクラス属性の値を持つものにスタイルを適用させます。

span.words {text-style:italic;}

要素名[属性名]

その要素の中で、指定した属性が指定されている要素にスタイルを適用させます。

textarea[readonly] {color:white;background-color:black}

要素名[属性名="属性値"]

その要素の中で、指定した属性が指定した値に設定されている要素にスタイルを適用させます。

a[target="_self"] {cursor:move;}

要素名[属性名~="属性値"]

その要素の中で、属性値が半角スペースで区切られたリストになっていて、その中に指定した属性値がある要素にスタイルを適用させます。

a[rel~="help copyright"] {font-weight:bold;}

要素名[属性名|="属性値"]

その要素の中で、属性値が”-”（ハイフン）で区切られたリストになっていて、その中に指定した属性値がある要素にスタイルを適用させます。

span[lang|="en"] {font-family:Verdana,Chicago,sans-serif;font-weight:bold;padding:0.5em;}

要素名:link

a要素の未訪問リンクにスタイルを適用させます。

要素名:visited

a要素の訪問済みリンクにスタイルを適用させます。

要素名:hover

a要素のリンクの上にカーソルがある時（非アクティブ状態）にスタイルを適用させます。

要素名:active

a要素のリンクがアクティブな状態の時にスタイルを適用させます。

記述例と注意

hover擬似クラスを指定する場合は、link擬似クラスとvisited擬似クラスの後、active擬似クラスの前に記述します。

a:link    {color:blue;}
a:visited {color:maroon;}
a:hover   {color:fuchsia;}
a:active  {color:green;}

IE5.5ではhover擬似クラスはhref属性が指定されているa要素でないと適用されません。CSSの仕様に忠実なレンダリングをするUAならそんなことはないため、上記の様に指定すると <a name="hoge">hoge</a> というアンカー上にカーソルがある場合もCSSが適用されます。これは上記の様に指定した後に a[name]:hover で通常のスタイルを指定することで回避できます。

要素名:focus

その要素がユーザーによってフォーカス（選択）された状態の時にスタイルを適用させます。例えば、フォームのテキストエリアなどの入力フィールドに入力が可能な状態の時など。

textarea:focus {color:black;background-color:ivory;}

要素名:lang(言語コード)

その要素の中で、lang属性の値が指定した言語コードに設定されているものにスタイルを適用させます。主な言語コード（２文字の主コード）には、ja (日本語)、en（英語）、fr (フランス語)、de (ドイツ語)、it (イタリア語)、 nl (オランダ語)、el (ギリシア語)、es (スペイン語)、pt (ポルトガル語)、ar (アラビア語)、he (ヘブライ語)、ru (ロシア語)、zh (中国語)、ko（韓国語）、hi (ヒンディー語)、la (ラテン語)、sa (サンスクリット語)などがあります。

em:lang(en) {color:blue;background-color:transparent;font:italic bold 100% serif;padding:0 .5em;}
em:lang(ja) {color:blue;background-color:transparent;font:bold normal 100% serif;}

要素名:first-child

その要素が、ある要素の中で最初に出現する子要素である場合にスタイルを適用させます。

p:first-child {font-weight:bold;}

要素名:first-line

指定したブロックレベル要素の１行目の文字列にスタイルを適用させます。

p:first-line {font-weight:bold;}

要素名:first-letter

指定したブロックレベル要素の先頭の１文字にスタイルを適用させます。

p:first-letter {font-size:150%;font-weight:bold;}

要素名:before

contentプロパティと共に使用して、その要素の直前に生成追加される内容にスタイルを適用させます。

p:before {content:url('cursor.gif');}

要素名:after

contentプロパティと共に使用して、その要素の直後に生成追加される内容にスタイルを適用させます。

p:after {content:"………続く？";}