CSS
セレクタと疑似クラス
セレクタ
CSSの基本は、要素名に続けて { } を記述し、その { } 内にその要素の見た目を記すことである。
何に対して { } でCSSを指定するかを選択するものを「セレクタ」といい、上記の場合は要素名がセレクタである（このことをタイプセレクタという）。
要素名以外でもセレクタの指定は可能であり、よく使う以下のようなセレクタがある。
ユニバーサルセレクタ
*（アスタリスク）に続けて { } を記述し、その { } 内にCSSを記述すると、全ての要素に対してその記述が適用される。
例えば以下は、全ての要素のmarginとpaddingを0にしている。
* {
margin: 0;
padding: 0;
}子孫セレクタ
ある要素の子要素である要素のみを指定するセレクタ。
要素名を半角のスペースで区切って記述していく。
例えば以下は、ul要素の中のa要素だけに、文字サイズの変更が適用される（他の部分のa要素には適用されない）。
ul a {
font-size: 0.8em;
}例えば以下のように書くと、id名がmainのdiv要素の中のli要素だけに、文字色の変更が適用される（他の部分のli要素には適用されない）。
div#main li {
color: #339933;
}要素名はスペースで区切って複数続けて書くことができる。
例えば以下は、id名がmainのdiv要素の中にある、クラス名がcaptionのp要素の中にあるem要素だけに適用される（他の部分のem要素には適用されない）。
div#main p.caption em {
font-style: normal;
font-weight: bold;
}疑似クラス
文書構造的には指定できない「要素の状態」などに対してCSSを適用するときは、疑似クラスというものが使用される。
疑似クラスの代表例は、a要素に関する疑似クラスである。
例えばまだ閲覧されていないリンクは「:link」という疑似クラス、閲覧済みのリンクは「:visited」という疑似クラスに対してCSSを指定する。
またリンクにマウスが重なった時の状態は、「:hover」という疑似クラスに対して指定できる。
a:link {
color: #ffffff;
//↑まだ閲覧されていないページへのリンクの文字色
}
div#menu a:visited {
color: #ccffcc;
//↑すでに閲覧されているページへのリンクの文字色
}
div#menu a:hover {
color: #339933;
//↑リンクにマウスが重なった時の文字色
}上記は、a要素の:linkの部分の文字色を#ffffff（白）にしている。同様に、div要素のid名menuの中にあるa要素の:visitedの文字色を#ccffcc（薄い緑っぽい色）にし、div要素のid名menuの中にあるa要素の:hoverの文字色を#339933（緑っぽい色）にしている。