【CSS】色々な要素の指定方法(セレクター)

CSS

CSSのセレクター(Selector)は、HTMLドキュメント内の特定の要素を選択し、その要素にスタイルを適用するために使われるものです。セレクターを使って、どの要素にスタイルを適用するかを指定します。

代表的なCSSセレクターの種類

要素セレクター

HTMLのタグ名を使って要素を選択します。

p { color: blue; }

この例では、全ての<p>タグに対して文字色を青に指定しています。

クラスセレクター(Class)

クラス名を使って特定の要素にスタイルを適用します。
クラス名の前に.をつけて指定します。

.highlight { background-color: yellow; }

この例では、class="highlight"が付いた要素の背景色が黄色になります。

IDセレクター

特定のIDを持つ要素にスタイルを適用します。
IDの前に#をつけて指定します。

#header { font-size: 20px; }

この例では、id="header"が付いた要素のフォントサイズが20pxになります。

属性セレクター

特定の属性を持つ要素にスタイルを適用します。

input[type="text"] { border: 1px solid black; }

この例では、type="text"の属性を持つ<input>要素に対して枠線を追加しています。

子孫セレクター

特定の要素の中にある別の要素を選択します。

div p { color: red; }

この例では、<div>の中にある全ての<p>タグに対して文字色を赤に指定しています。

子セレクター

直下の子要素だけを選択するセレクターです。>を使って指定します。

ul > li { color: green; }

この例では、<ul>の直下にある<li>要素に対して文字色を緑に指定しています。

隣接兄弟セレクター

特定の要素のすぐ後に続く兄弟要素を選択します。+を使って指定します。

h1 + p { margin-top: 10px; }

この例では、<h1>タグのすぐ後にある<p>タグに対してマージンを設定します。

全ての兄弟セレクター

特定の要素の後に続くすべての兄弟要素を選択します。~を使って指定します。

h1 ~ p { color: orange; }

この例では、<h1>の後に続く全ての<p>タグに対して文字色をオレンジに設定しています。

擬似クラスセレクター

特定の状態や位置に基づいて要素を選択します。:で始まります。

  • :hover マウスがホバーしたとき
  • :first-child 最初の子要素
  • :last-child 最後の子要素
a:hover { color: red; }

この例では、リンクにマウスをホバーすると文字色が赤になります。

  • :nth-child(n): n番目の子要素を選択します。
li:nth-child(2) { font-weight: bold; }

この例では、<li>タグの2番目の要素の文字を太字にします。

擬似要素セレクター

要素の特定部分(たとえば、最初の文字や最初の行)にスタイルを適用します。::で始まります。

  • ::before: 要素の前にコンテンツを追加
  • ::after: 要素の後にコンテンツを追加
  • ::first-line: 最初の行にスタイルを適用
p::first-line { font-size: 18px; }

この例では、<p>タグ内の最初の行のフォントサイズを18pxに指定しています。

グループ化セレクター

複数のセレクターをカンマで区切って一括でスタイルを適用します。

h1, h2, h3 { color: navy; }

この例では、<h1><h2><h3>全てに対して文字色を紺色に設定しています。

否定セレクター

特定の要素を除外して選択します。

p:not(.intro) { color: grey; }

この例では、class="intro"が付いていない全ての<p>要素に対して文字色を灰色に設定しています。

ユニバーサルセレクター

全ての要素にスタイルを適用します。*を使って指定します。

* {
    margin: 0;
    padding: 0;
}

この例では、全ての要素のマージンとパディングを0にリセットしています。

属性値の部分一致セレクター

特定の部分文字列に基づいて属性を持つ要素を選択します。

  • [attribute^="value"]: 値が特定の文字列で始まる
  • [attribute$="value"]: 値が特定の文字列で終わる
  • [attribute*="value"]: 値が特定の文字列を含む
a[href^="https"] { color: blue; }

この例では、href属性がhttpsで始まるリンクに対して文字色を青に設定しています。

子要素と擬似クラスの組み合わせ

特定の子要素に対して擬似クラスを使うことができます。

ul li:first-child { font-weight: bold; }

この例では、<ul>内の最初の<li>要素に対して文字を太字にします。

複雑な子セレクター

子要素と子孫要素のセレクターを組み合わせて、さらに複雑な選択が可能です。

div > p a { text-decoration: underline; }

この例では、<div>の直下にある<p>の中にあるすべての<a>タグに下線を引きます。

:only-child 擬似クラス

特定の親要素の中で、その要素が唯一の子要素である場合にスタイルを適用します。

p:only-child { color: purple; }

この例では、<p>が親要素の中で唯一の子要素である場合に、文字色を紫に設定します。

:only-of-type 擬似クラス

親要素の中で特定のタイプの要素が一つしかない場合にスタイルを適用します。

p:only-of-type { font-style: italic; }

この例では、親要素の中で<p>要素が一つだけの場合に、文字を斜体にします。

:nth-of-type(n) 擬似クラス

特定のタイプの要素が、同じ親要素内でn番目の位置にある場合にスタイルを適用します。

li:nth-of-type(3) { background-color: lightblue; }

この例では、同じ親要素内の3番目の<li>要素に背景色を水色にします。

:nth-last-child(n) 擬似クラス

最後から数えてn番目の要素にスタイルを適用します。

p:nth-last-child(1) { color: red; }

この例では、親要素の中で最後の<p>要素に文字色を赤に設定します。

:nth-last-of-type(n) 擬似クラス

特定のタイプの要素の最後から数えてn番目の要素にスタイルを適用します。

div:nth-last-of-type(2) { border: 2px solid green; }

この例では、親要素の中で最後から2番目の<div>要素に枠線を追加します。

:empty 擬似クラス

内容が何もない要素にスタイルを適用します。

div:empty { display: none; }

この例では、内容が空の<div>要素を非表示にします。

:enabled / :disabled 擬似クラス

フォーム要素が有効(enabled)または無効(disabled)になっているかでスタイルを適用します。

input:enabled { background-color: white; } input:disabled { background-color: grey; } 

この例では、<input>が有効な場合は白、無効な場合は灰色の背景色を設定します。

:checked 擬似クラス

チェックボックスやラジオボタンが選択されている場合にスタイルを適用します。

input[type="checkbox"]:checked { outline: 2px solid blue; }

この例では、チェックされたチェックボックスに青色の枠線を追加します。

:focus 擬似クラス

ユーザーが要素をフォーカスしているときにスタイルを適用します。

input:focus { border-color: orange; }

この例では、入力フィールドがフォーカスされたときに枠線の色をオレンジに変更します。

:target 擬似クラス

現在のURLのフラグメント識別子(#)が一致する要素にスタイルを適用します。

section:target { background-color: yellow; }

この例では、URLが#section1のように特定のセクションを指しているとき、そのセクションの背景色が黄色になります。

:lang 擬似クラス

要素のlang属性が特定の言語に一致する場合にスタイルを適用します。

p:lang(en) { font-style: italic; }

この例では、lang="en"(英語)の属性を持つ<p>要素の文字を斜体にします。

[属性セレクター]の複数指定

属性セレクターは複数の条件を指定することもできます。

a[href^="https"][target="_blank"] { color: green; }

この例では、hrefhttpsで始まり、かつtarget="_blank"の属性を持つリンクに対して文字色を緑に設定します。

カスタムデータ属性セレクター

HTMLで定義されたdata-*属性を使って、特定の要素を選択します。

[data-role="admin"] { font-weight: bold; }

この例では、data-role="admin"を持つ要素に対して文字を太字にします。

:root セレクター

ドキュメントの最上位の要素(通常は<html>)を選択します。CSS変数を定義する際によく使われます。

:root { --main-color: blue; }

この例では、--main-colorというCSS変数を定義し、他のセレクターで再利用できます。

:is() セレクター

グループ化セレクターのように、複数のセレクターをまとめて書くことができます。CSSのパフォーマンス向上に役立ちます。

:is(h1, h2, h3) { margin-bottom: 20px; }

この例では、<h1><h2><h3>に対して同じマージンを設定しています。

:where() セレクター

:is()と似ていますが、優先度(specificity)が0になるため、より低い優先度でスタイルを適用したい場合に使います。

:where(nav, footer) { background-color: #f0f0f0; }

この例では、<nav><footer>要素に対して背景色を設定しますが、優先度が低くなるため他のスタイルの上書きが容易です。

:has() セレクター

特定の子要素を持つ親要素に対してスタイルを適用します。CSSでは比較的新しいセレクターです。

div:has(p) { border: 1px solid red; }

この例では、<p>タグを子要素として持つ<div>要素に枠線を追加します。

:nth-child(an+b of selector)

:nth-childと似ていますが、特定のタイプの要素に対してさらに絞り込んでスタイルを適用します。

ul li:nth-child(2n of .special) { color: green; }

この例では、class="special"を持つ<li>要素のうち偶数番目のものにスタイルを適用します。

:dir() セレクター

要素のテキスト方向(例えばltrrtl)に基づいてスタイルを適用します。

p:dir(rtl) { text-align: right; }

この例では、右から左へのテキスト方向を持つ<p>要素に対して、テキストを右揃えにします。

:any-link セレクター

すべてのリンク要素に対してスタイルを適用します。<a>要素が訪問済みかどうかに関わらず適用されます。

:any-link { text-decoration: none; }

この例では、リンク全体に下線を除去します。

:current セレクター

特定のメディア要素(スライドショーやビデオプレイヤーなど)に対して、現在の表示されている要素にスタイルを適用します。

slide:current { border: 2px solid blue; }

この例では、現在表示されているスライドに枠線を追加します。

:indeterminate セレクター

状態が「不定」である要素(チェックボックスなど)にスタイルを適用します。

input[type="checkbox"]:indeterminate { background-color: grey; }

この例では、不定状態のチェックボックスに背景色を設定します。

::marker 擬似要素

リストアイテムのマーカー(例えば<ul><ol>の番号やマーク)にスタイルを適用します。

li::marker { color: red; font-size: 1.5em; }

この例では、リストアイテムのマーカーの色とサイズを変更しています。

::selection 擬似要素

ユーザーが選択したテキストに対してスタイルを適用します。

::selection { background-color: yellow; }

この例では、ユーザーが選択したテキストの背景色を黄色に設定します。

::file-selector-button 擬似要素

ファイル入力フィールド(<input type="file">)のボタン部分に対してスタイルを適用します。

input[type="file"]::file-selector-button { background-color: lightblue; }

この例では、ファイル選択ボタンの背景色を水色に変更します。

カスタムセレクター(Custom Selectors)

CSSにはカスタムセレクター(CSS変数のようなもの)を使用して、コードの再利用性を高めることができます。

@custom-selector :--btn .button, button; :--btn {
 background-color: blue; 
 color: white;
}

この例では、:--btnというカスタムセレクターがclass="button"を持つ要素と<button>要素にスタイルを適用します。

カスケード層セレクター

CSSのカスケード層機能を使用して、異なる層に基づいてセレクターを適用することができます。

@layer framework { .container { padding: 10px; } }

この例では、frameworkというカスケード層に属する.containerクラスにスタイルを適用します。複数の層がある場合、優先順位が設定できます。

属性値の正確な一致セレクター

属性の値が完全に一致する要素に対してスタイルを適用します。

[data-type="alert"] { border: 1px solid red; }

この例では、data-type属性が正確にalertである要素に対して枠線を追加します。

:first-of-type 擬似クラス

親要素内で特定のタイプの最初の要素にスタイルを適用します。

p:first-of-type { font-size: 20px; }

この例では、親要素内の最初の<p>要素に対してフォントサイズを設定します。

:last-of-type 擬似クラス

親要素内で特定のタイプの最後の要素にスタイルを適用します。

p:last-of-type { font-weight: bold; }

この例では、親要素内の最後の<p>要素に対して文字を太字にします。

:placeholder-shown 擬似クラス

テキストフィールドが空で、プレースホルダーが表示されているときにスタイルを適用します。

input:placeholder-shown { border-color: lightgray; }

この例では、プレースホルダーが表示されている場合に入力フィールドの枠線を灰色に設定します。

:read-only / :read-write 擬似クラス

フォーム要素が読み取り専用か、読み書き可能かでスタイルを変更できます。

input:read-only { background-color: #f0f0f0; } 
input:read-write { background-color: #ffffff; } 

この例では、読み取り専用のフィールドと読み書き可能なフィールドに異なる背景色を設定しています。

:optional / :required 擬似クラス

フォーム要素が必須か、任意であるかを基にスタイルを変更します。

input:required { border: 2px solid red; } 
input:optional { border: 2px solid green; }

この例では、必須入力フィールドに赤い枠線、任意入力フィールドに緑の枠線を設定しています。

:valid / :invalid 擬似クラス

入力されたデータが有効か無効かに基づいてスタイルを変更します。

input:valid { border-color: green; } 
input:invalid { border-color: red; } 

この例では、フォームフィールドの入力が有効な場合に緑、無効な場合に赤の枠線が表示されます。

:in-range / :out-of-range 擬似クラス

<input type="number">のように、数値範囲が指定されている場合、入力値がその範囲内か範囲外かに基づいてスタイルを適用します。

input:in-range { background-color: lightgreen; } 
input:out-of-range { background-color: pink; }

この例では、範囲内の数値には緑の背景、範囲外にはピンクの背景が設定されます。

:fullscreen 擬似クラス

要素がフルスクリーンモードになったときにスタイルを適用します。

:fullscreen { background-color: black; }

この例では、要素がフルスクリーンになった際に背景色を黒に設定します。

:autofill 擬似クラス

ブラウザが入力フィールドに自動入力したときにスタイルを適用します。

input:autofill { background-color: yellow; }

この例では、ブラウザによって自動入力されたフィールドに背景色を黄色に設定します。

:nth-last-child(-n+3) セレクター

要素の最後から数えて3つ目までの要素にスタイルを適用します。

li:nth-last-child(-n+3) { color: blue; }

この例では、最後から3つ目までの<li>要素に対して文字色を青にします。

:focus-visible 擬似クラス

キーボード操作などで要素にフォーカスが当たったときのみスタイルを適用します。視覚的な焦点リングを管理するために使われます。

button:focus-visible { outline: 2px solid blue; }

この例では、キーボードでフォーカスされたボタンに対して青色の枠線が表示されます。

:checked + label セレクター

特定の要素(例えばチェックボックス)がチェックされたとき、その直後にあるラベルにスタイルを適用します。

input[type="checkbox"]:checked + label { 
 text-decoration: line-through; 
}

この例では、チェックされたチェックボックスに隣接するラベルに打ち消し線を追加します。

:hover::after 擬似要素の組み合わせ

要素にホバーした際に、その要素の後にコンテンツを追加することができます。

a:hover::after { content: " (リンク)"; }

この例では、リンクにホバーすると「(リンク)」というテキストがリンクの後に表示されます。

::-webkit-scrollbar セレクター

Webkitベースのブラウザ(例えばChrome、Safari)でスクロールバーのスタイルをカスタマイズすることができます。

::-webkit-scrollbar { 
 width: 12px; 
}
 
::-webkit-scrollbar-thumb { 
 background-color: darkgrey; border-radius: 6px; 
} 

この例では、スクロールバーの幅と、スクロールハンドルのスタイルをカスタマイズします。

::-moz-selection 擬似要素

Firefoxでテキスト選択時のスタイルを適用します(::selectionに似ていますが、Firefox専用)。

::-moz-selection { 
 background-color: orange; 
}

この例では、Firefoxで選択したテキストの背景色をオレンジに設定します。

著者プロフィール
この記事を書いた人
ロジャー

Webアプリ開発を20年近く経験し、管理職なった今も時々ソースをいじるメインは営業職の管理者。もうすぐ40代。最近は、AIを活用して少しでも仕事やプライベートを面白くしていきたいと考えているおっさんです。困った事もAIなら解決してくれるはず!?

ロジャーをフォローする
CSSシステム開発
ロジャーをフォローする
タイトルとURLをコピーしました