CSSのルールセットの構成要素に、セレクタがありますが、そのセレクタの中にも、いくつかの種類が存在しており、始めたばかりのうちは、何に対して選択を行っているのかが少しわかりづらいかと思います。
本記事では、セレクタの種類として、基本となるものにしぼって解説したいと思います。
前提知識
-
CSSのルールセットを理解している -
CSSのセレクタが何かを理解している
上記の記事に、CSSの基本が記述されているため、まだ理解していない方は、こちらを先に確認することを推奨します。
要素セレクタ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ウェブページのデモ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>ウェブページのデモ</h1>
<p>これはウェブページのデモです。</p>
<p>つきの。フォローしてね</p>
</body>
</html>
p {
color: red;
background-color: #f0f0f0;
}
要素セレクタは、タグ名をそのまま指定する、最もシンプルなセレクタです。
p {
/* color: red; */
/* background-color: #f0f0f0; */
}
本コードの場合、pを指定しているため、HTMLの<p>タグすべてに対して、任意の装飾を加えることを意味します。
クラスセレクタ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ウェブページのデモ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="demo-message">ウェブページのデモ</h1>
<p class="demo-message">これはウェブページのデモです。</p>
<p>つきの。フォローしてね</p>
</body>
</html>
.demo-message {
color: red;
background-color: #f0f0f0;
}
クラスセレクタは複数の要素に共通のスタイルを当てるためのセレクタです。
.クラス名という形で、指定することができ、本記事では.demo-messageと指定しているので、demo-messageという名前のクラスを持つ要素に対して、装飾を施すことを指定しています。
.demo-message {
/* color: red; */
/* background-color: #f0f0f0; */
}
HTMLには、attributeとして、classをつけることが出来ます。
<h1 class="demo-message">ウェブページのデモ</h1>
<p class="demo-message">これはウェブページのデモです。</p>
クラスは、要素に対して、意味を明示的に与えるためのものなのですが、cssは、このclassごとに、装飾を与えることが可能なのです。
classの名前さえ同じであれば、タグの種類が違っても同じ装飾を与えられますし、同じタグであっても、クラス名を別にしておけば、別の装飾を与えることも可能です。
実務で最も使用するセレクタは、このクラスセレクタであるといえるでしょう。
IDセレクタ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ウェブページのデモ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="demo-message">ウェブページのデモ</h1>
<p class="demo-message">これはウェブページのデモです。</p>
<p id="follow-message">つきの。フォローしてね</p>
</body>
</html>
.demo-message {
color: red;
background-color: #f0f0f0;
}
#follow-message {
font-weight: bold;
color: blue;
}
IDセレクタは、ページ内で唯一の要素に対して装飾を加えるためのセレクタです。
#ID名という形で指定することができ、本記事では#follow-messageという形で指定しているため、follow-messageというID名を持つ要素に対して装飾を与えることを指定しています。
#follow-message {
/* font-weight: bold; */
/* color: blue; */
}
HTMLには、attributeとして、IDをつけることができます。
<p id="follow-message">つきの。フォローしてね</p>
IDは、ページ内で唯一の役割があることを明示的に表しており、JavaScriptで要素を取得する際や、ページ内リンクを作成する際などによく使用します。
CSSでも、IDセレクタを使用して装飾を与えることは可能ですが、後から同じ見た目にしておきたい要素が生まれた際の変更が煩雑になる上に、詳細度が強すぎて上書きが行いにくいといったデメリットがあります。
そのため、HTMLで明示的に名前を与えたものに対して、CSSで指定して装飾を施したい場合は、クラスセレクタで行うのがお行儀がいいといえるでしょう。
総括
-
要素セレクタは、タグ名そのものを指定するセレクタ -
クラスセレクタは、複数の要素に対して共通のスタイルを与えるセレクタ -
IDセレクタは、ページ内で唯一の要素に対してスタイルを与えるセレクタ -
CSSでは、IDセレクタよりも、クラスセレクタを使用する方がお行儀がいい