CSSのセレクタについて

セレクタを使うことで、複数のタグに同じスタイルを付与したり、サイト全体でスタイルを統一したり管理することができます。セレクタにはいくつか種類があります。主に使うのは、”class”と”id”です。

他にも疑似クラス・疑似要素といったセレクタも存在し、要素にホバーした時のスタイルの変化を指定したり、タグの前後に要素を追加したりすることができます。

class	例）.header, .content, .footer
id	例）#page-top #main-page
全称セレクタ	例）* { background: #fff; } ※すべての要素にスタイルの指定をする場合

複数のセレクタを指定する場合

複数のセレクタを使用する場合は、以下のように、”,”で区切って指定します。

“aaa”と”bbb”というクラスを持つ要素に同じスタイルを指定する例）

.aaa, .bbb {
	font-size: 12px;
}

上記をウェブページで表示すると、”aaa”と”bbb”というクラスを持つ要素のフォントサイズが12pxになります。
このような書き方をしない場合は、

“aaa”と”bbb”というクラスを持つ要素に同じスタイルをそれぞれ指定する例）

.aaa {
	font-size: 12px;
}
.bbb {
	font-size: 12px;
}

上記のように同じ記述を2回しなければいけないので、短縮できる場合は複数のセレクタをまとめるようにしましょう。

疑似クラス・疑似要素について

疑似クラスとは、指定した要素が特定の状態にある時に指定したスタイルを適用するものです。
良く使われる疑似クラスは、“a:link{}”、“a:hover{}”、“a:visited{}”、“:nth-child(n){}”、”:first-child{}”、“:last-child{}”等が挙げられます。

疑似クラスも疑似要素も対応していないブラウザもあるので、チェックを欠かさないようにしましょう。

【指定した要素内のn番目の子要素にスタイルを適用する例）】

<ul class="list">
	<li>hoge</li>
	<li>hoggehoge</li>
	<li>hogehogehoge</li>
</ul>

.list li:nth-child(2) {
	color: red;
}

上記の例だと、2番目のliに対してだけスタイルが適用されます。