セレクタって何?

スタイルを適用する部分を特定するための記述です。

要素名のほかに、class属性の値やid属性の値、疑似クラス、疑似要素などが利用できます。
CSSの指定は、大きく3つの部分に分けられます。指定を適用する範囲、指定する内容、指定する値です。CSSのスタイルを適用する範囲のことを、セレクタと呼びます。それに対して、指定する内容をプロパティと呼びます。プロパティとの間は「:」で区切られ、1組のプロパティと値は「;」で分けられます。セレクタによって適用されるプロパティと値は、{ }でまとめられます。

要素名(CSS)

h2 {
h2要素に適用するスタイル
}
p {
p要素に適用するスタイル
}

クラス(CSS)

.title {
class="title"の要素に適用するスタイル
}

ID(CSS)

#header {
id="header"の要素に適用するスタイル
}
#main {
id="main"の要素に適用するスタイル
}

疑似クラス(CSS)

:link
a要素と組み合わせて、未表示のリンクに適用
:visited
a要素と組み合わせて、表示済みのリンクに適用
:hover
要素にマウスカーソルが重なったときに適用
:active
要素をクリックしたときに適用
:focus
フォームの部品などの要素が選択されたときに適用
:lang(言語コード)
要素が特定のコードのときに適用
:first-child
特定要素内の最初の子要素のときに適用

疑似要素(CSS)

:first-line
要素の1行目に適用
:first-letter
要素の1文字目に適用
:before
要素の前にcontentプロパティで内容を追加し、そのスタイルを指定
:after
要素の後にcontentプロパティで内容を追加し、そのスタイルを指定
カテゴリー: CSS, HTMLの基礎知識, ナレッジノート, 要素   パーマリンク

コメントを残す

メールアドレスが公開されることはありません。