ウェブページの見た目を自在に操るCSSにおいて、セレクタはスタイルを適用する対象を指定するための不可欠な要素です。多種多様なセレクタが存在し、それぞれ異なる方法でHTML要素を選択します。この記事では、主要なCSSセレクタの種類とその効果的な使い方を網羅的に解説します。
基本セレクタ
まずは、最も基本的なセレクタから見ていきましょう。
ユニバーサルセレクタ (*)
このセレクタは、文書内のすべてのHTML要素を選択します。ブラウザのデフォルトスタイルをリセットする際などによく使われます。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
タイプセレクタ (要素セレクタ)
特定のHTML要素名に基づいて要素を選択します。例えば、すべての<p>要素や<h1>要素を選択できます。
h1 {
font-size: 2.5em;
color: #333;
}
p {
line-height: 1.6;
}
IDセレクタ (#)
HTML要素に付与されたid属性の値を用いて、その要素を一意に選択します。idは文書内で一つしか存在してはならないため、特定の要素にのみスタイルを適用したい場合に用います。
#main-header {
text-align: center;
background-color: #f8f8f8;
padding: 20px;
}
<h1 id="main-header">サイトのメインタイトル</h1>
クラスセレクタ (.)
HTML要素に付与されたclass属性の値を用いて要素を選択します。複数の要素に同じクラス名を指定することで、共通のスタイルを適用できます。
.highlight-text {
color: #007bff;
font-weight: bold;
}
<p class="highlight-text">このテキストは強調表示されます。</p>
<span class="highlight-text">こちらも強調されます。</span>
要素とクラスの組み合わせセレクタ
特定の要素にのみ特定のクラスのスタイルを適用したい場合に使用します。
p.warning {
color: red;
border: 1px solid red;
padding: 5px;
}
<p class="warning">注意が必要なメッセージです。</p>
<div class="warning">このdivは対象外です。</div>
セレクタの優先順位 (Specificity)
同じ要素に対して複数のセレクタがスタイルを適用する場合、CSSには優先順位のルールがあります。一般的に、IDセレクタはクラスセレクタより、クラスセレクタはタイプセレクタより優先されます。
#unique-item {
color: green; /* 最も優先される */
}
.common-style {
color: blue;
}
p {
color: red;
}
<p id="unique-item" class="common-style">このテキストの色は緑になります。</p>
組み合わせセレクタ
複数のセレクタを組み合わせて、より詳細な要素の選択を行うことができます。
グループセレクタ (,)
複数のセレクタに対して同じスタイルを適用したい場合、カンマで区切って一度に指定できます。
h1, h2, h3 {
font-family: 'メイリオ', sans-serif;
color: #2c3e50;
}
子孫セレクタ (Descendant Selector, (半角スペース))
ある要素の子孫であるすべての要素を選択します。直接の子要素だけでなく、孫要素やそれ以降の要素も対象に含まれます。
article p {
margin-bottom: 1em;
font-size: 0.95em;
}
<article>
<p>記事内の最初の段落です。</p>
<div>
<p>これはdiv内の段落で、親も子孫セレクタの対象です。</p>
</div>
</article>
子セレクタ (Child Selector, >)
ある要素の直接の子要素のみを選択します。子孫セレクタとは異なり、孫要素以降は対象になりません。
nav > ul {
list-style: none;
padding-left: 0;
}
<nav>
<ul> <!-- このulがスタイル適用対象 -->
<li>メニュー項目1</li>
<li>メニュー項目2</li>
<div>
<ul> <!-- このulは直接の子ではないため対象外 -->
<li>サブ項目</li>
</ul>
</div>
</ul>
</nav>
隣接兄弟セレクタ (Adjacent Sibling Selector, +)
同じ親要素を持つ要素のうち、指定した要素の直後に隣接する要素を選択します。
h2 + p {
margin-top: 20px;
font-weight: normal;
}
<section>
<h2>セクションタイトル</h2>
<p>この段落にのみmargin-topが適用されます。</p>
<div>他のコンテンツ</div>
<p>この段落には適用されません。</p>
</section>
一般兄弟セレクタ (General Sibling Selector, ~)
同じ親要素を持つ要素のうち、指定した要素の後に続くすべての兄弟要素を選択します。
h3 ~ p {
font-style: italic;
color: #555;
}
<article>
<h3>記事のサブタイトル</h3>
<p>最初の段落です（イタリック体）。</p>
<div>他のコンテンツ要素</div>
<p>二番目の段落です（イタリック体）。</p>
</article>
属性セレクタ
HTML要素の属性やその値に基づいて要素を選択します。
[属性名]: 指定された属性を持つ要素を選択。
a[target] {
text-decoration: none;
border-bottom: 1px dotted #007bff;
}
<a href="#" target="_blank">新しいタブで開くリンク</a>
<a href="#">通常のリンク</a>
[属性名="値"]: 指定された属性が厳密にその値と一致する要素を選択。
input[type="submit"] {
background-color: #28a745;
color: white;
padding: 8px 15px;
border: none;
}
[属性名~="値"]: 属性値がスペース区切りの単語リストであり、その単語リストの中に指定された値が含まれる要素を選択。
img[alt~="nature"] {
border: 2px solid green;
padding: 3px;
}
<img src="forest.jpg" alt="beautiful nature landscape"> <!-- マッチ -->
<img src="bird.jpg" alt="wildlife nature photo"> <!-- マッチ -->
<img src="city.jpg" alt="urban_nature"> <!-- マッチしない ("nature"が単語として存在しないため) -->
[属性名|="値"]: 属性値が指定された値で始まるか、または指定された値にハイフンが続く要素を選択（主に言語コードなどに利用）。
[lang|="ja"] {
font-family: 'Yu Gothic', sans-serif;
}
<p lang="ja">日本語のテキスト</p>
<div lang="ja-JP">さらに詳細な日本語</div>
[属性名^="値"]: 属性値が指定された文字列で始まる要素を選択。
a[href^="https://"] {
color: blue;
text-decoration: underline;
}
[属性名$="値"]: 属性値が指定された文字列で終わる要素を選択。
a[href$=".pdf"] {
background: url('pdf-icon.png') no-repeat right center;
padding-right: 20px;
}
[属性名*="値"]: 属性値に指定された文字列が部分的に含まれる要素を選択。
input[id*="search"] {
border: 1px solid #ccc;
padding: 5px;
}
<input type="text" id="main-search-box"> <!-- マッチ -->
<input type="text" id="global-search"> <!-- マッチ -->
擬似クラスと擬似要素
特定の状態にある要素や、文書ツリーには存在しない要素の一部を選択します。
擬似クラス (Pseudo-classes)
要素が特定の状態にあるときにスタイルを適用します。単一のコロン (:) で表されることが多いです。
- リンク関連の擬似クラス:
:link: 未訪問のリンク:visited: 訪問済みのリンク:hover: マウスカーソルが乗っている要素:active: クリックなどでアクティブになっている要素
a:link { color: #0000ff; } a:visited { color: #800080; } a:hover { color: #ff0000; text-decoration: underline; } a:active { color: #008000; } - 構造的擬似クラス:
:first-child: 親要素内の最初の子要素:last-child: 親要素内の最後の子要素:nth-child(n): 親要素内のn番目の子要素 (例:(even),(odd),(3n)):only-child: 親要素内で唯一の子要素
li:first-child { font-weight: bold; } li:nth-child(even) { background-color: #f0f0f0; } p:only-child { color: gray; } - UI状態擬似クラス:
:focus: フォーカスが当たっている要素 (<input>など):checked: チェックされている要素 (<input type="checkbox">など):disabled: 無効化されている要素
input[type="text"]:focus { border-color: #007bff; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); } input[type="checkbox"]:checked + label { font-weight: bold; color: green; } - 否定擬似クラス:
:not(セレクタ): 指定したセレクタにマッチしない要素を選択。
p:not(.intro) { text-indent: 1em; /* introクラスを持つp要素以外にインデントを適用 */ }
擬似要素 (Pseudo-elements)
文書ツリーには直接存在しない要素の一部にスタイルを適用します。二重コロン (::) を使用するのが現在の推奨ですが、過去の互換性のために単一コロン (:) も広く使われています。
::first-line: ブロックレベル要素の最初の行
p::first-line {
font-variant: small-caps;
color: #c0392b;
}
::first-letter: ブロックレベル要素の最初の文字
p::first-letter {
font-size: 200%;
float: left;
margin-right: 5px;
color: #2980b9;
}
::before/::after: 要素のコンテンツの前または後に生成されるコンテンツ (contentプロパティと組み合わせて使用)
li::before {
content: "▶ ";
color: #f39c12;
}
a[href$=".pdf"]::after {
content: " (PDF)";
font-size: 0.8em;
color: gray;
}
::selection: ユーザーが選択した（ハイライトした）部分
::selection {
background-color: yellow;
color: black;
}