CSSセレクタとは。セレクタの種類や指定方法

本記事は広告が含まれる場合があります CSS

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

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

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

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

CSSの基本文法
 

 

CSSセレクタとは?

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

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

CSSの基本文法
 

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

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

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

CSSセレクターを指定してh2タグの背景にのみ色を付けている例
 

■上記のHTML

 

■上記のCSS

 

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

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

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

 

基本的なセレクタの種類

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

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

◾️基本的な5種類のセレクタ

  • ユニバーサルセレクタ(全称セレクタ)
  • 要素セレクタ
  • classセレクタ
  • idセレクタ
  • 各セレクタを組み合わせて指定する

 

ユニバーサルセレクタ(全称セレクタ)

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

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

 

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

◾️表示例
ユニバーサルセレクタ 各要素が全てピンク色になっている

 

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

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

 

要素セレクタ

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

 

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

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

 

■表示例
要素セレクターの使用例

 

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

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

 

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

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

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

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

 

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

 

■表示例

class名を利用して一部の要素のみ中央寄せにしている例

 

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

 

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

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

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

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

 

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

■表示例

id名を利用して各リスト(li)に対して異なるスタイルを指定している例

 

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

 

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

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

◾️CSSセレクタの優先順位の決まり方

  1. !important
  2. インラインスタイルシート形式
  3. IDセレクタ
  4. クラスセレクタ、属性セレクタ
  5. 要素セレクタ
  6. ユニバーサルセレクタ(*)

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

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

■要素セレクタで青色、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{color:red;}でheader要素の中のp要素を赤文字にしている例

 

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

 

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

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

 

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

■表示例
div.container{background:pink;}でdiv要素かつclass名がcontainerの要素の背景をピンク色にする

 

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

 

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

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

 

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

◾️表示例

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

 

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

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

 

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

◾️表示例

1階層下の要素にのみCSSを適用させている例

 

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

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

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

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

◾️応用的なセレクタの種類

  • 同じ階層のすぐ後にある要素
  • 同じ階層の後ろにある要素
  • 最初の要素・最後の要素
  • 奇数行・偶数行の要素
  • 上から何番目の要素
  • 〇〇以外の要素
  • ある属性を持った要素

 

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

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

 

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

◾️表示例

divタグ直後のpタグにのみスタイルを適用させている例

 

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

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

 

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

◾️表示例

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

 

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

 

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

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

 

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

◾️表示例

fisrt-child、last-childを使って最初と最後の要素にのみスタイルを指定している例

 

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

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

 

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

◾️表示例

nth-of-typeを使用している例

 

上の例では: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の基本文法

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

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

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

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

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

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

 


 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

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

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

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

検索して記事を見つける

探したいキーワードを入力・検索して記事を見つけたい方はこちら

-CSS