CSSセレクタについて

HTMLにスタイルを適用するためのセレクタ

CSSに記述したプロパティをHTMLに反映するには、セレクタを使ってどこに適用するかを指示する必要があります。
現在使えるセレクタは次の7種類です。

• ユニバーサルセレクタ
• タイプセレクタ
• クラスセレクタ
• IDセレクタ
• 属性セレクタ
• 擬似クラス
• 擬似要素

今回はこれらのセレクタについて、具体的にコードを交えながら解説していきます。

ユニバーサルセレクタ

ユニバーサルセレクタは全ての要素を指すセレクタです。

コード例

* {
	color: #333;
}

「* (アスタリスク)」を使います。
全体に共通のスタイル（文字色やフォントの種類など）を指定するときに使います。

タイプセレクタ

HTML要素名を指定するセレクタです。

コード例

body {
	background-color: #333;
}

h1,
p {
	color: #333;
}

ul li,
ol li {
	list-style-type: none;
}

特定の要素に共通でスタイルを適用したいときに使用します。

クラスセレクタ

クラスセレクタはHTML要素のclass属性を指定するセレクタです。

コード例

<style>
p.text1 {
	color: #333;
}

/* 要素名は省略可 */
.text2 {
	font-size: 86%;
}
</style>
<section>
	<p class="text1">テキスト</p>
</section>

「要素名 + . (ドット) + クラス名」、または「. (ドット) + クラス名」の形で使用します。

スタイルの優先度は上記のセレクタよりも強くなるため、特定のクラス名がついた要素に共通のスタイルを適用したいときに使います。

IDセレクタ

IDセレクタはHTML要素のid属性を指定するセレクタです。

コード例

<style>
p#text1 {
	color: #333;
}

/* 要素名は省略可 */
#text2 {
	color: #c00;
}
</style>
<section>
	<p>テキスト</p>
	<p>テキスト</p>
	<p id="text1">テキスト</p>
	<p id="text2">テキスト</p>
</section>

「要素名 + # (シャープ) + id名」、または「# (シャープ) + id名」の形で使用します。

クラスセレクタよりも優先度が高く、かつid属性は一意である（同じid名を持つ要素は同じページには存在しない）ため、ピンポイントで特定の要素にのみスタイルを適用したいときに使用します。

属性セレクタ

属性セレクタはHTML要素に記述された属性名や属性値を使って指定するセレクタです。

コード例

<style>
/* 属性「type」があるHTML要素 */
input[type] {
	display: block;
	margin-bottom: 20px;
	padding: 10px;
	border-radius: 2px;
	border: 1px solid #999;
}

/* 属性「type」、値「text」に該当するHTML要素 */
input[type="text"] {
	width: 200px;
}

/* 属性「class」の中に「form_text」が含まれるHTML要素 */
input[class ~= "form_text"] {
	background: #f7f7f7;
}

/* 属性「name」、値が「your」から始まるHTML要素 */
input[name ^= "your"] {
	border:1px solid #c00;
}

/* 属性「name」、値が「il」で終わるHTML要素 */
input[name $= "il"] {
	width: 500px;
}

/* 属性「name」、値に「ri」が含まれるHTML要素 */
input[name *= "ri"] {
	border:1px solid #0c0;
}
</style>
<section>
	<label>お名前：</label><input type="text" name="your_name" placeholder="山田 太郎" class="text form_text">
	<label>フリガナ：</label><input type="text" name="furigana" placeholder="ヤマダ タロウ">
	<label>年齢：</label><input type="number" name="age" placeholder="20">
	<label>電話番号：</label><input type="tel" name="tel" placeholder="080-2222-2555">
	<label>メールアドレス：</label><input type="email" name="email" placeholder="sample@test.com">
</section>

属性セレクタにはいくつかパターンがあります。

属性名

「type」、「src」、「href」など属性名のみを指定するパターンです。

属性名 = “値”

「type + 値」、「target + 値」など属性名と値をセットで指定するパターンです。
1つ目の指定よりも要素を絞り込むことができます。

属性名 ~= “値”

属性の値は「class=”text text_required form_text”」のように半角スペースで区切って複数記述されることがあります。
この中で「text_required」や「form_text」などいずれかの値を持つ要素に適用したい場合に使用します。

属性名 ^= “値”

正規表現のようなパターンです。
指定した文字列から始まる値を指定します。
上記のコード例では、値が「your」から始まる要素を指定しており、該当する「your_name」に適用されます。

属性名 $= “値”

上記とは反対に、指定した文字列で終わる値を指定するパターンです。
上記のコード例では、値が「il」で終わる要素を指定しており、該当する「email」に適用されます。

属性名 *= “値”

指定した文字列を含む値を指定するパターンです。
上記のコード例では、値に「ri」を含む要素を指定しており、該当する「furigana」に適用されます。

擬似クラス

定義された擬似クラスを指定するセレクタです。

コード例

<style>
a:link {
	color: #fff;
}
a:hover {
	color: #ddd;
}
</style>
<p><a href="#">リンク</a></p>

予め定義された擬似クラスを指定します。
リンク、フォームの状態など様々なものが用意されています。

リンクの擬似クラスについて詳しくは、別記事「リンクの擬似クラス」をご覧ください。

擬似要素

定義された擬似要素を指定するセレクタです。

コード例

<style>
p::before {
	display: inline-block;
	content: "";
	margin-right: 10px;
	color: #fff;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color: #999;
}
</style>
<p>テキスト</p>

次の擬似要素が定義されています。

擬似クラスと擬似要素はどちらも「: (コロン)」を使いますが、擬似クラスはコロン1つ、擬似要素はコロン2つです。
少し紛らわしいため、注意してください。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。