【初心者向け】CSSセレクタの種類や指定方法を徹底解説

HTMLやCSSを勉強した際に、初期でつまづきやすいのがCSSセレクタの種類や指定方法です。

CSSを使って任意の要素に対して適切なスタイルを設定するには、CSSセレクタの種類や指定方法を理解しておく必要があります。

今回はCSSセレクタの概要やセレクタの種類、指定方法を解説します。

 

 

CSSセレクタとは？

CSSセレクタとは、「どのHTML要素にスタイルを適用させるか」を決めるものです。

たとえば、h2要素に背景色を設定したい場合は下記のように設定します。

 

下記の「h2」がCSSセレクタに相当し、h2{・・・}と記載することでh2タグで囲った要素のみスタイルを指定させています。

〇〇{・・・}の〇〇部分をCSSセレクタと呼びます。

実際にHTML・CSSで記述すると下記の通り。

 

■上記のHTML

 

■上記のCSS

 

なお、セレクタの中に記載されるどのようなスタイルを適用させるかを決めるものは「プロパティ」と呼びます。

上記例だと「background-color」がプロパティです。

CSSでは、セレクタ、プロパティ、そして値を組み合わせて1つのセットとして記述します。

 

基本的なセレクタの種類

セレクタにはいくつか指定方法があります。

ここではよく使うセレクタを5種類紹介します。初心者の方はまずこちらを覚えておきましょう。

 

ユニバーサルセレクタ（全称セレクタ）

ユニバーサルセレクタ（全称セレクタ）とは、すべての要素に対してスタイルを指定できるセレクタのことです。

アスタリスク(*)を使って指定します。

 

◾️全ての要素に対して同じスタイルを設定している例

◾️表示例

 

ユニバーサルセレクタを利用すると全ての要素に対してスタイルを指定することができるため、各要素にデフォルトで設定されているスタイルをリセットしたいときなどに使用されます。

◾️各要素にデフォルトで設定されている余白のリセット方法

 

要素セレクタ

要素セレクタとは、HTMLのタグ名で指定できるセレクタのことです。

 

要素ごとにフォントサイズを変更したいといった場合などによく使われます。

◾️要素ごとにフォントサイズを変更している例

 

■表示例

 

ある要素の共通設定をする際などは要素セレクタを使うと便利です。

反面、複数のp要素のうち特定の箇所だけという場合は要素セレクタだけでは難しいので、classセレクタなどを利用してスタイルを指定する必要があります。

 

classセレクタ(クラスセレクタ)

classセレクタとは、HTMLタグに指定されているclass名を利用してスタイルを指定できるセレクタのことです。

HTML側では開始タグの中に<h1 class="任意のclass名"></h1>といった具合にclass名が指定します。

CSS側では.（ドット）の後ろにclass名を記述します。

 

◾️「center」というclass名が付いた要素のみ中央寄せにしている例

 

■表示例

 

上記のように、クラス名で指定することで、h1,pなどの要素名を問わずスタイルを指定することができます。

 

idセレクタ(アイディーセレクタ)

idセレクタとは、HTMLタグに指定されているid名を利用してスタイルを指定できるセレクタのことです。

HTML側では、開始タグの中に<h1 class="任意のid名"></h1>といった具合でid名を指定できます。

CSS側では#（シャープ）の後ろにid名を記述します。

 

◾️各リストごとに異なるidを付けてスタイルを指定している例

■表示例

 

なお、id名はHTMLファイルの中で一意でないといけない（同じID名を2回以上書いてはいけない）のに対して、class属性は上記例のように同じclass名で複数回書くことができます。

 

セレクタの優先順位と詳細度

CSSセレクタの優先順位は基本的には以下のように決まります。

上が最も優先順位が高くて、下に行くほど優先順位が低くなります。

たとえば、要素セレクタとclassセレクタを比較した例です。

■要素セレクタで青色、classセレクタで黄色に設定している例

■表示結果

 

要素セレクタ(h1)よりもクラスセレクタ(.sample)が優先されて、黄色になりました。

考え方の基本としては、「より明示的に設定したスタイルが優先される」というルールになります。

より詳しい優先順位の詳しい説明や、後半で説明するセレクタを組み合わせた場合の優先順位（詳細度)については「知っておきたいCSS セレクタの優先順位・詳細度・継承」をご参照ください。
 

各セレクタを組み合わせて指定する方法　基本編

上で解説した要素セレクタ・classセレクタ・idセレクタは組み合わせて指定することもできます。

あるセレクタをx、もう一方のセレクタをyとするとき、下記のような組み合わせがよく使われます。

方法	意味
x y{ ... }　　※xとyに半角スペースあり	xで指定した要素の中のy
xy{ ... }　　※xとyに半角スペースなし	xかつyの要素
x,y{ ... }　　※xとyにカンマあり	xおよびyの要素
x>y{ ... }　　※xとyに>あり	xの要素直下にあるyの要素

 

xで指定した要素の中のy (x y{...})

header p{・・・}のように複数のセレクタを半角スペースを空けて記述すると、header要素の中にあるp要素という絞り込み指定ができます。

 

■header要素の中のp要素にのみスタイルを指定している例

■表示例

 

上の例では、headerタグの中にあるpタグのみを絞り込んで赤文字に変更しています。

 

xかつyの要素 (xy{...} ※スペースを空けない)

div.sample{・・・}のように複数のセレクタを半角スペースを空けずに繋げて記述すると、divかつ「sample」というクラス名がついた要素という指定ができます。

 

■divかつclass名「container」がついている要素にスタイルを指定している例

■表示例

 

上の例では、div要素でかつclass名「container」がついている場合は背景がピンク色になりましたが、div要素の中のclass名「container」がついたpタグはスタイル変更されていないことがわかります。

 

xおよびyの要素 (x,y{ ... })

セレクタ1,セレクタ2{・・・}のように複数のセレクタを,（カンマ）区切りで記述すると、記述したすべてのセレクタにスタイルを適用することができます。

 

◾️h1タグ、h2タグの両方を中央寄せにしている例

◾️表示例

 

xの要素直下にあるyの要素 (x>y{ ... })

セレクタ1 > セレクタ2{・・・}のようにセレクタの間に, >（大なり記号）を記述すると、セレクタ1の1階層下にある要素にのみスタイルを適用することができます。

 

◾️クラス名「oya」がついたdivタグの1階層下にあるpタグにのみスタイルを適用させている例

◾️表示例

 

上の例では、>（大なり記号）を使って1階層下のpタグにのみスタイルを適用させているため、2階層下のpタグにはスタイルが効いていないことがわかります。
 

各セレクタを組み合わせて指定する　応用編

ここからはもう少し応用への使い方もご紹介します。

さまざまなセレクタのバラエティを知っておくとコーディングがしやすくなるので、余力がある方は覚えておくのがおすすめです。

 

同じ階層のすぐ後にある要素　x + y{}

セレクタ1 + セレクタ2{・・・}のようにセレクタの間に, +（プラス記号）を記述すると、セレクタ1と同じ階層にあるすぐ後ろのセレクタ2にのみスタイルを適用することができます。

 

◾️同階層でdivタグ直後のpタグにのみスタイルを適用させている例

◾️表示例

 

同じ階層の後ろにある要素 x ~ y{}

セレクタ1 ~ セレクタ2{・・・}のようにセレクタの間に, ~（波線）を記述すると、セレクタ1より後ろで同じ階層にあるセレクタ2にスタイルを適用することができます。

 

◾️同階層でdivタグの後ろにあるpタグにスタイルを適用させている例

◾️表示例

 

上で紹介したセレクタ1 + セレクタ2{・・・}の場合と似ていますが、直後のものだけを指定したい場合は+（プラス記号）、後ろのものすべてに指定したい場合は~（波線）と使い分けられるようにしましょう。

 

最初の要素・最後の要素 x:first(last)-of-type{}

ある階層の最初の要素・最後の要素にのみスタイルを適用させたい場合は、それぞれセレクタ名:first-of-type{・・・}、セレクタ名:last-of-type{・・・}と記述します。

 

◾️最初のリストは赤文字、最後のリストは青文字に指定している例

◾️表示例

 

上から何番目の要素 x:nth-of-type(数字){}

ある階層の上から何番目の要素にのみスタイルを適用させたい場合は、それぞれセレクタ名:nth-of-type(任意の数字){・・・}と記述します。

 

◾️上から2番目のliタグのみ赤色に変更している例

◾️表示例

 

上の例では:nth-of-type(任意の数字){・・・}の()内に2と記述しているため、上から2番目の要素にのみスタイルが適用されています。

奇数行・偶数行の要素 x:nth-of-type(odd/even){}

上で解説したnth-of-type()の()の中に「odd」としてあげることで、ある階層における奇数行の要素、「even」としてあげることで偶数行の要素のみ指定することができます。

 

◾️偶数行のみ背景色を指定している例

◾️表示例

 

またnを用いてnth-of-type(2n+1){・・・} nth-of-type(2n){・・・}とすることでも奇数行の要素、偶数行の要素の指定が可能。さらに、この方法の場合nth-of-type(3n){・・・}とすることで、3の倍数の行の要素にのみスタイルを指定するといったことも可能です。

 

〇〇以外の要素 x:not(y){}

セレクタ名:not(適用したくない要素){・・・}のように記述することで、()内に記載した要素を除くすべての要素にのみスタイルを適用することができます。

 

◾️class名「exclude」がついたpタグ以外にスタイル適用させている例

◾️表示例

 

また、最初の要素（あるいは最後の要素）を除くすべての要素にスタイルを適用したいといった場合は、それぞれセレクタ名:not(:first-of-type){・・・}セレクタ名:not(:last-of-type){・・・}と記述します。

 

ある属性を持った要素 x[属性名=”値”]{}

ある属性を持った要素にのみスタイルを適用させたい場合は、セレクタ名[属性名=”値”]{・・・}と記述します。

 

◾️type属性に「text」が指定されているものだけ横幅を変更している例

◾️表示例

 

なお、値に関係なくある属性を持っている要素すべてにスタイルを適用させたい場合はセレクタ名[属性名]{・・・}と記述するだけでOKです。

 

まとめ

まとめです。今回はCSSセレクタの概要やセレクタの種類、指定方法を解説しました。

CSSでHTMLタグのスタイルを指定していく際、知っているセレクタの数が多いとスムーズにコーディングができます。

そのため、まずは基本的なセレクタを覚えて、余力があれば知っておくと便利なものも使えるようにしておくと良いでしょう。

より詳しい優先順位の詳しい説明や、後半で説明するセレクタを組み合わせた場合の優先順位（詳細度)については「知っておきたいCSS セレクタの優先順位・詳細度・継承」をご参照ください。

なお、実際にインターネット上にホームページを公開するにはドメインとレンタルサーバーを借りる必要があります。

ホームページの作り方については「ホームページの作り方・個人Webサイトの自作方法【総まとめ版】」をご参照ください。

今回は以上になります。最後までご覧いただきありがとうございました。
 

 

 

YouTubeチャンネル開設しました！

最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。