スタイルを適用する部分を特定するための記述です。
要素名のほかに、class属性の値やid属性の値、疑似クラス、疑似要素などが利用できます。
CSSの指定は、大きく3つの部分に分けられます。指定を適用する範囲、指定する内容、指定する値です。CSSのスタイルを適用する範囲のことを、セレクタと呼びます。それに対して、指定する内容をプロパティと呼びます。プロパティと値の間は「:」で区切られ、1組のプロパティと値は「;」で分けられます。セレクタによって適用されるプロパティと値は、{ }でまとめられます。
要素名(CSS)
[css]h2 {
h2要素に適用するスタイル
}
p {
p要素に適用するスタイル
}
[/css]
クラス(CSS)
[css].title {
class="title"の要素に適用するスタイル
}[/css]
ID(CSS)
[css]#header {
id="header"の要素に適用するスタイル
}
#main {
id="main"の要素に適用するスタイル
}[/css]
疑似クラス(CSS)
- :link
- a要素と組み合わせて、未表示のリンクに適用
- :visited
- a要素と組み合わせて、表示済みのリンクに適用
- :hover
- 要素にマウスカーソルが重なったときに適用
- :active
- 要素をクリックしたときに適用
- :focus
- フォームの部品などの要素が選択されたときに適用
- :lang(言語コード)
- 要素が特定のコードのときに適用
- :first-child
- 特定要素内の最初の子要素のときに適用
疑似要素(CSS)
- :first-line
- 要素の1行目に適用
- :first-letter
- 要素の1文字目に適用
- :before
- 要素の前にcontentプロパティで内容を追加し、そのスタイルを指定
- :after
- 要素の後にcontentプロパティで内容を追加し、そのスタイルを指定