CSSのセレクタは、Webページのスタイルを指定する上で非常に重要な役割を果たしています。しかし、セレクタの種類が非常に多く、使い分けが難しいという人も多いのではないでしょうか。
本記事では、CSSのセレクタの基本的な使い方から、より高度な指定方法まで、詳しく解説していきます。WebデザインやWeb開発に携わる方はもちろん、CSSに興味がある方にも役立つ内容となっています。
どうやってセレクタって指定するのでしょうか？基本的な方法と複雑な指定方法を教えて下さい！
セレクタを指定する方法はいくつかありますが、基本的な方法としては、要素名セレクタ、IDセレクタ、クラスセレクタなどがあります。要素名セレクタは要素の名前で指定する方法で、IDセレクタはID属性で指定する方法、クラスセレクタはclass属性で指定する方法です。
また、親子関係を指定する方法や、特定の属性を持つ要素を指定する方法、特定の場所や順番で要素を指定する方法、要素内の1行目や1文字目を指定する方法、要素の前後にコンテンツを追加する方法などがあります。
それぞれ詳しく解説しましょう。
スタイルシートの適用対象とは
スタイルシートの適用対象は、Webページ内の要素です。要素とは、HTMLで記述されたWebページの構成要素のことです。たとえば、テキスト、画像、リンク、テーブルなどが含まれます。スタイルシートは、これらの要素に対して、外観やレイアウトを指定するために使用されます。
全要素を指定する
スタイルシートで全要素にスタイルを適用するには、ワイルドカードセレクタ（*）を使用します。ワイルドカードセレクタを使用すると、Webページ内のすべての要素に対してスタイルを指定することができます。
以下は、全要素に対してフォントサイズを16px、行の高さを1.5に指定する例です。
* {
font-size: 16px;
line-height: 1.5;
}ワイルドカードセレクタを使用する場合、全ての要素に同じスタイルが適用されるため、注意が必要です。たとえば、テーブルやリストのような要素には、ワイルドカードセレクタで適用されたスタイルが意図しない表示になることがあります。そのため、適用対象を限定したスタイルの指定が望ましい場合があります。
指定のIDやクラスを持つ要素を指定する
スタイルシートでIDやクラスを持つ要素を指定するには、IDセレクタとクラスセレクタを使用します。以下にそれぞれのセレクタの説明と使用方法を説明します。
IDセレクタ
IDセレクタは、HTMLの要素にid属性が設定されている場合に使用されます。IDセレクタは、#（シャープ）を接頭辞として、id属性に設定された値を指定します。
たとえば、idが”header”である要素に対して背景色を指定する場合は、以下のように記述します。
#header {
background-color: blue;
}クラスセレクタ
クラスセレクタは、HTMLの要素にclass属性が設定されている場合に使用されます。クラスセレクタは、.（ドット）を接頭辞として、class属性に設定された値を指定します。
たとえば、classが”red”である要素に対して文字色を赤色に指定する場合は、以下のように記述します。
.red {
color: red;
}
また、複数のクラスを持つ要素に対してスタイルを指定する場合は、クラス名を連結して指定することができます。
たとえば、classが”red”と”bold”である要素に対して文字色を赤色、太字に指定する場合は、以下のように記述します。
.red.bold {
color: red;
font-weight: bold;
}
以上が、スタイルシートでIDやクラスを持つ要素を指定する方法の解説です。IDやクラスを適切に使用することで、必要な要素にスタイルを指定することができます。
特定の組み合わせの要素を指定する
スタイルシートで特定の組み合わせの要素を指定するには、結合子を使用します。結合子を使用することで、複数の要素の間の親子関係や兄弟関係を指定することができます。
| 結合子 | 説明 | 使用例 |
|---|---|---|
| 子孫結合子（スペース） | 親要素と子要素の間のスペースを用いて、親要素の中の全ての子孫要素を指定する | ul li |
| 直接の子結合子（>） | 親要素と直接的に関連する子要素を指定する | ul > li |
| 兄弟結合子（+） | 指定した要素の直後に位置する兄弟要素を指定する | #first + p |
| 汎用兄弟結合子（~） | 指定した要素の後ろに位置する全ての兄弟要素を指定する | #first ~ p |
以下に、主要な結合子と使用方法を説明します。
子孫結合子（スペース）
子孫結合子は、親要素と子要素の間にスペースを入れて指定します。この結合子を使用すると、親要素の中にある全ての子孫要素に対してスタイルを適用することができます。
たとえば、以下のようなHTMLがある場合、ul要素内の全てのli要素に対してスタイルを指定することができます。
<ul>
<li>リスト1</li>
<li>リスト2</li>
</ul>ul li {
color: red;
}直接の子結合子（>）
直接の子結合子は、親要素と直接的に関連する子要素に対してスタイルを指定します。この結合子を使用すると、親要素の直接的な子要素に対してのみスタイルを適用することができます。
たとえば、以下のようなHTMLがある場合、ul要素の直接的なli要素に対してスタイルを指定することができます。
<ul>
<li>リスト1</li>
<li>リスト2</li>
<ol>
<li>サブリスト1</li>
<li>サブリスト2</li>
</ol>
</ul>ul > li {
color: red;
}汎用兄弟結合子（~）
汎用兄弟結合子は、同一の親要素を持つ要素の間の兄弟関係を指定します。この結合子は、指定した要素の後ろに位置する兄弟要素全てに対してスタイルを適用することができます。
たとえば、以下のようなHTMLがある場合、idが”first”である要素の後ろに位置する全てのp要素に対してスタイルを指定することができます。
<div>
<h1 id="first">タイトル</h1>
<p>段落1</p>
<p>段落2</p>
</div>#first ~ p {
color: red;
}特定の属性や属性値を持つ要素を指定する
スタイルシートで特定の属性や属性値を持つ要素を指定するには、属性セレクタを使用します。属性セレクタを使用することで、指定した属性や属性値を持つ要素に対してスタイルを適用することができます。
以下に、主要な属性セレクタと使用方法を説明します。
存在する属性を指定する
属性セレクタを使用して、指定した属性を持つ全ての要素に対してスタイルを指定することができます。属性セレクタは、[属性名]という形式で使用します。以下は、class属性を持つすべての要素に対してスタイルを指定する例です。
[class] {
font-size: 16px;
color: red;
}属性値が一致する要素を指定する
属性セレクタを使用して、指定した属性値を持つ要素に対してスタイルを指定することができます。属性セレクタは、[属性名="属性値"]という形式で使用します。以下は、class属性が”red”である要素に対してスタイルを指定する例です。
[class="red"] {
color: red;
}属性値が一致しない要素を指定する
属性セレクタを使用して、指定した属性値を持たない要素に対してスタイルを指定することができます。属性セレクタは、[属性名!="属性値"]という形式で使用します。以下は、class属性が”red”でない要素に対してスタイルを指定する例です。
[class!="red"] {
color: blue;
}属性値が指定した値で始まる要素を指定する
属性セレクタを使用して、指定した値で始まる属性値を持つ要素に対してスタイルを指定することができます。属性セレクタは、[属性名^="属性値"]という形式で使用します。以下は、href属性の値が”http”で始まる要素に対してスタイルを指定する例です。
[href^="http"] {
font-weight: bold;
}属性値が指定した値で終わる要素を指定する
属性セレクタを使用して、指定した値で終わる属性値を持つ要素に対してスタイルを指定することができます。属性セレクタは、[属性名$="属性値"]という形式で使用します。以下は、src属性の値が”.png”で終わる要素に対してスタイルを指定する例です。
[src$=".png"] {
border: 1px solid black;
}属性値に指定した値が含まれる要素を指定する
属性セレクタを使用して、指定した値を含む属性値を持つ要素に対してスタイルを指定することができます。属性セレクタは、[属性名*="属性値"]という形式で使用します。以下は、title属性の値に”JavaScript”という文字列が含まれる要素に対してスタイルを指定する例です。
[title*="JavaScript"] {
background-color: yellow;
}属性値が指定した値で始まり、後にハイフンが続く要素を指定する
属性セレクタを使用して、指定した値で始まり、後にハイフンが続く属性値を持つ要素に対してスタイルを指定することができます。属性セレクタは、[属性名|="属性値"]という形式で使用します。以下は、lang属性の値が”en”である要素と、lang属性の値が”en”で始まり、後にハイフンが続く要素に対してスタイルを指定する例です。
[lang="en"] {
font-family: Arial, sans-serif;
}
[lang|="en"] {
font-family: "Times New Roman", serif;
}上記の例では、[lang="en"]が先にあるため、lang属性の値が”en”である要素にはArialフォントが適用されます。lang属性の値が”en-us”など、”en”で始まり、後にハイフンが続く要素には、”Times New Roman”フォントが適用されます。
以上が、スタイルシートで特定の属性や属性値を持つ要素を指定する方法の解説です。属性セレクタを使用することで、Webページ内の必要な要素にスタイルを指定することができます。
ユーザー操作で変化する要素を指定する
スタイルシートで、ユーザー操作によって変化する要素を指定するには、疑似クラスを使用します。疑似クラスは、要素がある状態になったときにのみ適用されるクラスであり、ユーザーの操作や、特定の条件が満たされたときにスタイルが適用されます。
以下に、主要な疑似クラスと使用方法を説明します。
:link疑似クラス まだ訪問していないリンクに適用
:link疑似クラスは、まだ訪問していないリンクに適用されます。つまり、リンク先に遷移する前の状態のリンクに対してスタイルを指定することができます。以下は、リンクのデフォルトの色を青色から赤色に変更する例です。
a:link {
color: red;
}:visited疑似クラス 既に訪問したリンクに適用
:visited疑似クラスは、既に訪問したリンクに適用されます。つまり、リンク先に遷移した後の状態のリンクに対してスタイルを指定することができます。ただし、セキュリティ上の理由から、訪問したリンクに適用できるスタイルには制限があります。以下は、訪問したリンクのデフォルトの色を紫色から緑色に変更する例です。
a:visited {
color: green;
}:hover疑似クラス マウスポインターが要素の上に置かれたときに適用
:hover疑似クラスは、マウスポインターが要素の上に置かれたときに適用されます。つまり、要素にマウスがホバーされたときにスタイルを指定することができます。以下は、ボタンにマウスをホバーしたときのスタイルを指定する例です。
button:hover {
background-color: gray;
}:active疑似クラス ボタンやリンクなどの要素がアクティブな状態のときに適用
:active疑似クラスは、ボタンやリンクなどの要素がアクティブな状態のときに適用されます。つまり、要素がクリックされた瞬間にスタイルを指定することができます。以下は、ボタンがクリックされた瞬間のスタイルを指定する例です。
button:active {
box-shadow: 2px 2px 2px gray;
}:focus疑似クラス 要素がフォーカスされたときに適用
:focus疑似クラスは、要素がフォーカスされたときに適用されます。つまり、フォーム要素にフォーカスが当てられたときにスタイルを指定することができます。以下は、フォーム要素にフォーカスが当てられたときのスタイルを指定する例です。
input:focus {
border: 1px solid blue;
}:enabled疑似クラス 有効なフォーム要素に適用
:enabled疑似クラスは、有効なフォーム要素に適用されます。つまり、フォーム要素が有効な状態のときにスタイルを指定することができます。以下は、有効なフォーム要素のデフォルトの色を赤色から緑色に変更する例です。
input:enabled {
color: green;
}:disabled疑似クラス 無効なフォーム要素に適用
:disabled疑似クラスは、無効なフォーム要素に適用されます。つまり、フォーム要素が無効な状態のときにスタイルを指定することができます。以下は、無効なフォーム要素の背景色をグレーから黄色に変更する例です。
input:disabled {
background-color: yellow;
}:checked疑似クラス チェックボックスなどの選択された状態の要素に適用
:checked疑似クラスは、チェックボックスやラジオボタンなどの選択された状態の要素に適用されます。つまり、チェックボックスやラジオボタンが選択された状態のときにスタイルを指定することができます。以下は、チェックボックスが選択されたときのスタイルを指定する例です。
input[type="checkbox"]:checked {
background-color: gray;
}以上が、スタイルシートでユーザー操作によって変化する要素を指定する方法の解説です。疑似クラスを使用することで、ユーザーがWebページを操作したときの様々な状態に応じたスタイルを指定することができます。
特定の場所や順番で要素を指定する
スタイルシートで、特定の場所や順番で要素を指定するには、疑似クラスを使用します。疑似クラスは、要素の親要素内での位置や種類に基づいてスタイルを指定することができます。
以下に、主要な疑似クラスと使用方法を説明します。
:first-child疑似クラス 親要素内で最初の子要素に適用
:first-child疑似クラスは、親要素内で最初の子要素に適用されます。つまり、最初の子要素に対してスタイルを指定することができます。以下は、最初の子要素のマージンを0にする例です。
div:first-child {
margin-top: 0;
}:last-child疑似クラス 親要素内で最後の子要素に適用
:last-child疑似クラスは、親要素内で最後の子要素に適用されます。つまり、最後の子要素に対してスタイルを指定することができます。以下は、最後の子要素のマージンを0にする例です。
div:last-child {
margin-bottom: 0;
}:nth-child疑似クラス 親要素内のn番目の子要素に適用
:nth-child()疑似クラスは、親要素内のn番目の子要素に適用されます。つまり、指定した位置の子要素に対してスタイルを指定することができます。以下は、3番目の子要素の背景色を黄色にする例です。
li:nth-child(3) {
background-color: yellow;
}:nth-last-child疑似クラス 親要素内の最後からn番目の子要素に適用
:nth-last-child()疑似クラスは、親要素内の最後からn番目の子要素に適用されます。つまり、最後から指定した位置の子要素に対してスタイルを指定することができます。以下は、最後から2番目の子要素のボーダーを指定する例です。
li:nth-last-child(2) {
border: 1px solid red;
}:first-of-type 疑似クラスは、親要素内で最初に現れる同じ種類の要素に適用
:first-of-type疑似クラスは、親要素内で最初に現れる同じ種類の要素に適用されます。つまり、最初に現れる同じ種類の要素に対してスタイルを指定することができます。以下は、最初に現れるp要素のマージンを0にする例です。
p:first-of-type {
margin-top: 0;
}:last-of-type 疑似クラスは、親要素内で最後に現れる同じ種類の要素に適用
:last-of-type疑似クラスは、親要素内で最後に現れる同じ種類の要素に適用されます。つまり、最後に現れる同じ種類の要素に対してスタイルを指定することができます。以下は、最後に現れる同じ種類のp要素のマージンを0にする例です。
p:last-of-type {
margin-bottom: 0;
}:only-of-type 疑似クラスは、親要素内で同じ種類の要素が1つしかない場合に適用
:only-of-type疑似クラスは、親要素内で同じ種類の要素が1つしかない場合に適用されます。つまり、同じ種類の要素が1つしかない場合に対してスタイルを指定することができます。以下は、同じ種類の要素が1つしかない場合に適用するスタイルを指定する例です。
img:only-of-type {
border: 1px solid blue;
}:nth-of-type疑似クラス 親要素内でn番目に現れる同じ種類の要素に適用
:nth-of-type()疑似クラスは、親要素内でn番目に現れる同じ種類の要素に適用されます。つまり、指定した位置に現れる同じ種類の要素に対してスタイルを指定することができます。以下は、親要素内で3番目に現れるh2要素のフォントサイズを大きくする例です。
h2:nth-of-type(3) {
font-size: 24px;
}:nth-last-of-type疑似クラス 親要素内で最後からn番目に現れる同じ種類の要素に適用
:nth-last-of-type()疑似クラスは、親要素内で最後からn番目に現れる同じ種類の要素に適用されます。つまり、最後から指定した位置に現れる同じ種類の要素に対してスタイルを指定することができます。以下は、親要素内で最後から2番目に現れるdiv要素の背景色を緑にする例です。
div:nth-last-of-type(2) {
background-color: green;
}以上が、スタイルシートで特定の場所や順番で要素を指定する方法の解説です。疑似クラスを使用することで、要素の位置や種類に応じたスタイルを指定することができます。
要素内の１行目や１文字目を指定する
スタイルシートで、要素内の1行目や1文字目を指定するには、疑似要素を使用します。疑似要素は、HTML文書内に存在しない仮想的な要素であり、::を前置することで表現されます。
以下に、主要な疑似要素と使用方法を説明します。
::first-line疑似要素 要素内の最初の行に適用
::first-line疑似要素は、要素内の最初の行に適用されます。つまり、要素の最初の行に対してスタイルを指定することができます。以下は、p要素内の最初の行のフォントサイズを大きくする例です。
p::first-line {
font-size: 24px;
}::first-letter疑似要素 要素内の最初の文字に適用
::first-letter疑似要素は、要素内の最初の文字に適用されます。つまり、要素の最初の文字に対してスタイルを指定することができます。以下は、p要素内の最初の文字のフォントサイズを大きくする例です。
p::first-letter {
font-size: 32px;
}::first-letter疑似要素には、いくつかのプロパティが適用できます。たとえば、float、text-indent、line-height、background、colorなどのプロパティが使用できます。ただし、一部のプロパティは適用できない場合があるため、注意が必要です。
以上が、スタイルシートで要素内の1行目や1文字目を指定する方法の解説です。疑似要素を使用することで、要素内の特定の場所に応じたスタイルを指定することができます。
要素の前後を指定する
スタイルシートで、要素の前後にコンテンツを追加するには、疑似要素を使用します。疑似要素は、HTML文書内に存在しない仮想的な要素であり、::を前置することで表現されます。
以下に、主要な疑似要素と使用方法を説明します。
::before疑似要素 要素の前にコンテンツを追加
::before疑似要素は、要素の前にコンテンツを追加します。つまり、要素の前にテキストや画像などのコンテンツを追加することができます。以下は、要素の前に”Before”というテキストを追加する例です。
p::before {
content: "Before";
}::before疑似要素には、コンテンツ以外にも、display、position、float、margin、padding、border、background、colorなどのプロパティを使用することができます。
::after疑似要素 要素の後にコンテンツを追加
::after疑似要素は、要素の後にコンテンツを追加します。つまり、要素の後にテキストや画像などのコンテンツを追加することができます。以下は、要素の後に”After”というテキストを追加する例です。
p::after {
content: "After";
}::after疑似要素には、::before疑似要素と同様に、コンテンツ以外にも、display、position、float、margin、padding、border、background、colorなどのプロパティを使用することができます。
以上が、スタイルシートで要素の前後にコンテンツを追加する方法の解説です。疑似要素を使用することで、要素の前後に任意のコンテンツを追加することができます。
その他のセレクタを指定する
スタイルシートで、その他のセレクタを指定するには、疑似クラスを使用します。疑似クラスは、要素の特定の状態や属性、親要素などに基づいてスタイルを指定することができます。
以下に、主要な疑似クラスと使用方法を説明します。
:root疑似クラス HTML文書のルート要素（HTML要素）に適用
:root疑似クラスは、HTML文書のルート要素（HTML要素）に適用されます。つまり、HTML文書全体に対してスタイルを指定することができます。以下は、HTML文書全体の背景色をグレーにする例です。
:root {
background-color: gray;
}:empty疑似クラス 中身が空の要素に適用
:empty疑似クラスは、中身が空の要素に適用されます。つまり、中身が空の要素に対してスタイルを指定することができます。以下は、中身が空のdiv要素の高さを0にする例です。
div:empty {
height: 0;
}:target疑似クラス アンカーリンクのターゲットに適用
:target疑似クラスは、アンカーリンクのターゲットに適用されます。つまり、アンカーリンクのクリックに応じて、指定された要素に対してスタイルを指定することができます。以下は、アンカーリンクをクリックした際に指定された要素の背景色を赤にする例です。
:target {
background-color: red;
}:lang疑似クラス 指定した言語属性を持つ要素に適用さ
:lang疑似クラスは、指定した言語属性を持つ要素に適用されます。つまり、指定した言語属性を持つ要素に対してスタイルを指定することができます。以下は、日本語を指定した要素のフォントサイズを大きくする例です。
p:lang(ja) {
font-size: 20px;
}:not疑似クラス 指定した要素以外の要素に適用
:not疑似クラスは、指定した要素以外の要素に適用されます。つまり、指定した要素以外の要素に対してスタイルを指定することができます。以下は、id属性が”sidebar”である要素以外のdiv要素の背景色を黄色にする例です。
div:not(#sidebar) {
background-color: yellow;
}以上が、スタイルシートでその他のセレクタを指定する方法の解説です。疑似クラスを使用することで、要素の特定の状態や属性、言語属性、指定した要素以外の要素に対してスタイルを指定することができます。これらの疑似クラスを使用することで、より柔軟なスタイル指定が可能となります。
リスキリングでキャリアアップしてみませんか？
リスキリング(学び直し)は、経済産業省が推奨しており、
今だけ、最大７０％のキャッシュバックを受けることができます。
最大70％の給付金が出るおすすめのプログラミングスクール！
国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！
興味のある方はすぐに確認しましょう。
まとめ
CSSのセレクタの基本的な使い方から、より高度な指定方法まで、詳しく解説しました。
- CSSのセレクタは、Webページのスタイルを指定する上で非常に重要な役割を果たしています。
- セレクタを指定する方法としては、要素名セレクタ、IDセレクタ、クラスセレクタなどがあります。
- より高度な指定方法としては、親子関係を指定する方法や、特定の属性を持つ要素を指定する方法、特定の場所や順番で要素を指定する方法、要素内の1行目や1文字目を指定する方法、要素の前後にコンテンツを追加する方法などがあります。
セレクタの種類が多いということで、使い分けが難しいと感じていましたが、解説を聞いて少し理解が深まりました。
スタイルシートには、さまざまなセレクタがありますが、どのセレクタを使うかを適切に選択することが重要です。基本的なセレクタから高度なセレクタまで、理解しておくことで、より柔軟かつ効率的なスタイル指定が可能になります。セレクタの使い方をマスターし、Webページの見た目を美しく、使いやすくしましょう。