【CSS】セレクタ指定方法を学んでidやclassをスッキリ！

CSSでいろいろ装飾をする練習をしていたら、classやidだらけになって困っていたのでセレクタ関連についていろいろ勉強しました。その中でセレクタの指定方法について重要だと感じたものをまとめてみました。
なお、あくまで初心者がまとめるものなので難しい用語はなしで、私のような初心者でも理解できるようにしてあります。ご指摘あれば教えてください。

1、間接セレクタって？
2、隣接セレクタって？
3、直下セレクタって？
4、子孫セレクタって？
5、属性セレクタって？
6、疑似クラス？
役立つ疑似クラス一覧
tips、『:nth-child(数字)』と『:nth-of-type(数字)』の違い

いきなり全部覚えるよりも、作りたいものに対して『このセレクタなら〇〇が作れる』といった視点で見て作りながら見直すぐらいがいいと思います。

間接セレクタって？

キーボードの上のほうにある『~』(チルダ)をつかって、親要素が同じいわば兄弟/姉妹要素に対して指定するセレクタの事を指します。
実例で見たほうがわかりやすいかと思いますので見てましょう。

html

<p class="brother">長男</p>
<p>次男</p>
<p>三男</p>
<div>
<p>四男</p>
</div>
<div>
<p>五男</p>
</div>

css

.brother~p {
 color:red;
 background-color:silver;
}

兄弟要素だけ指定

長男

次男

三男

四男

五男

次男と三男だけが赤色になりました。『.brother~p』で指定したことで同じ親子関係にあり、なおかつ自分より下の兄弟に対して指定する方法です。長男は開始部分なので除外されています。また四男と五男はdivタグに囲われているので兄弟関係ではなく、いわゆる甥っ子・姪っ子の関係になる為除外されています。

もう一つ例を見てみましょう。

html

<p>長男</p>
<p>次男</p>
<p>三男</p>
<div>
  <p>長女</p>
  <p>次女</p>
</div>

css

p~p {
 color:red;
 background-color:silver;
}

p~pで指定

長男

次男

三男

長女

次女

長女と次女を1つの<div>で囲ってみると今度は次女も赤色に変化しました。これは親要素<div>内の<p>が長女と次女で姉妹要素となっている為、CSSでセレクタをp~pで指定したので長女は開始セレクタに該当するため除外されて次女が赤に変化するという流れです。

隣接セレクタって？

今度は隣接セレクタについて見ていきます。隣接セレクタは『前の要素+自身の要素』となり、隣り合う要素が一致すれば装飾をするという意味になります。

html

<p>長男</p>
<p>次男</p>
<p>三男</p>
<p>長女</p>
<p>次女</p>

css

p+p {
 color:red;
 background-color:silver;
}

p+pで指定

長男

次男

三男

長女

次女

『前要素+自身の要素』という形なので最初の<p>には前要素がないので該当せず、2つ目以降は『前要素<p>+自身の要素<p>』が成立するのでCSSで装飾されています。

こんな感じにしてみれば、メモ帳風のデザインにもできます。

隣接セレクタでborder-top:dashed 2px silver;を指定

直下セレクタって？

直下セレクタとは直接の子要素に対して『>』で指定します。さっそく見てみましょう。

html


<div class="parent">
<p class="brother2">長男は次男・三男と山へ芝刈りに、長女と次女は川へ洗濯に行きました。</p>
<p><span class="brother2">次女が川で洗濯していると、川の上流からドンブラコとおおきなドリアンが流れてきました。</span></p>
</div>

css

.parent > .brother2 {
 color: red;
 background-color: silver;
}

.parent > .brother2で指定

長男は次男・三男と山へ芝刈りに、長女と次女は川へ洗濯に行きました。

次女が川で洗濯していると、川の上流からドンブラコとおおきなドリアンが流れてきました。

ちょっと長くて見づらいですが、簡単に言えば親要素のすぐ下に指定した子要素が来ていれば対象になります。

今回ならば前半の文の要素の構成は親要素<div class=”parent”>→子要素<p class=”brother2″>で親子ですが、後半の文は親要素<div class=”parent”>→子要素<p>→孫要素<span class=”brother2″>になっているので直接の親子関係で.parent > .brother2が成立しない為そのままになっています。

ようは直下セレクタは直接の親子のみ指定という事です。

子孫セレクタって？

子孫セレクタは『』(半角スペース)で指定します。自分の家系の下の階層に向けて指定する方法です。見てみましょう。

html


<div class="parent">
<p class="brother4">長男は次男・三男と山へ芝刈りに、長女と次女は川へ洗濯に行きました。</p>
<p><span class="brother4">次女が川で洗濯していると、川の上流からドンブラコとおおきなドリアンが流れてきました。</span></p>
</div>

css

.parent .brother4 {
 color: red;
 background-color: silver;
}

.parent .brother4で指定

長男は次男・三男と山へ芝刈りに、長女と次女は川へ洗濯に行きました。

次女が川で洗濯していると、川の上流からドンブラコとおおきなドリアンが流れてきました。

先程の直下セレクタは純粋な親子要素だけでしたが、今回の子孫セレクタは親と子だけでなく親と孫や親とひ孫・玄孫などとつながれば階層に関係なく指定が出来ます。

直下セレクタは部位指定、子孫セレクタは部位より広い範囲指定みたいな形で覚えるといいと思います。

属性セレクタって？

だいぶ進みました。ここからは今までと少し違ったタイプのセレクタかなと思います。まずは属性セレクタについて見ていきます。

属性セレクタはいくつかあるのですが、今回は3つに絞ってみていきます。

完全一致
部分一致
前方一致・後方一致

完全一致

指定したものと完全に一致したものをCSSで装飾するという意味です。指定方法は

a[href=”参照元”]{プロパティ:値;}

という書き方をします。例で見てみましょう。

html

<p><a href="https://sunsukeblog.com">すんすけblog</a></p>
<p><a href="https://sunsukeblog.com/category/programming">すんすけblog/programming</a></p>

CSS

a[href="https://sunsukeblog.com"]{
  font-size:2em;
  color:green;
  border:2px solid gray;
  text-decoration: none;
  background-color:skyblue;
  font-weight:bold;
}

href=”https://sunsukeblog.com”に完全一致

すんすけblog

すんすけblog/programming

上は『href=”https://sunsukeblog.com/”』なので完全に一致ですが。下のほうは『href=”https://sunsukeblog.com/category/programming”』であるため多すぎて不一致で対象外になります。

部分一致

完全一致は多すぎても少なすぎてもダメでしたが、部分一致は指定したものが含まれるものをCSSで装飾します。

a[href*=”参照元”]{プロパティ:値;}

完全一致の書き方でhrefの後に『*』(アスタリスク)を入れると部分一致になります。

<p><a href="https://www.google.com/">GoogleのHome</a></p>
<p><a href="https://www.google.com/mail/">Gmailへ</a></p>

CSS

a[href*="https://www.google.com/"]{
  font-size:2em;
  color:green;
  border:2px solid gray;
  text-decoration: none;
  background-color:skyblue;
  font-weight:bold;
}

href*=”https://www.google.com/”に部分一致

GoogleのHome

Gmailへ

『href*=』にした事で”https://www.google.com/”を含むものを対象としています。

ちなみに参照元はファイルのパスでももちろんいいので、

<img src="../img/写真タイトル.png"/>
<img src="../thumbnail/写真タイトル.png"/>

と振り分けて、ファイルのパス(サムネ用とコンテンツ用とか)によって入っている写真のサイズなどをCSSで一括して装飾してあげればいちいち設定する必要もなくなります。

前方一致・後方一致

最後は前方一致・後方一致という属性セレクタになります。

[前方一致]

a[href^=”参照元”]{プロパティ:値;}

[後方一致]

a[href$=”参照元”]{プロパティ:値;}

前方一致は文字通り前の部分が一致しているかで検索をして対象となる要素を装飾します。見てみましょう。

[前方一致]

a[href^=”参照元”]{プロパティ:値;}


<div class="attribute"><a href="https://sunsukeblog.com/">すんすけブログ</a></div>
<div class="attribute"><a href="https://www.google.com/">GoogleのHome</a></div>

CSS

a[href^="https://"]{
  font-size:2em;
  color:green;
  border:2px solid gray;
  text-decoration: none;
  background-color:skyblue;
  font-weight:bold;
}

href^=”https://”に前方一致

すんすけブログ

GoogleのHome

前方一致では最初から途中までが一致しているならば対象とする事ができます。これを利用すればブログカードのようなものも作ることが可能です。

[後方一致]

a[href$=”参照元”]{プロパティ:値;}


<div class="attribute2"><a href="https://sunsukeblog.com/wp-content/uploads/2018/08/SUBTOTAL.xlsx">これはExcelファイルです</a></div>

CSS

a[href$=".xlsx"]{
  color:green;
  border:2px solid gray;
  text-decoration: none;
  background-color:skyblue;
  font-weight:bold;
}

href$=”.xlsx”で後方一致

これはExcelファイルです

疑似クラス？

疑似クラスと似た用語で疑似要素というものがあります。しかしまったく異なるものなのでせっかくなのでここで整理してみましょう。

[疑似要素]

要素自体の一部を装飾する事です。CSS3からはセレクタの後に『::』をつけてセレクタを修飾します。

例、::before、::after、::first-letter、::first-line、::section

[疑似クラス]

疑似クラスは要素の構成以外の部分を装飾します。よく使われる疑似クラスの例としては:hoverです。

:hoverはリンクにマウスカーソルを乗せると色などが変化します。しかしリンクする先が変わるわけではないので、要素の構成が変わったわけではないですね。

例、:hover、:active、:nth-child(n)、nth-of-type(n)、:empty

疑似クラスの種類

疑似クラスは数多くの種類があります。まずどういったものが有るのか見てみましょう。

:hover　マウスカーソルが乗った時の挙動※別記事へ

:active　クリックした時の挙動※別記事へ

:nth-child(数字)　n番目の要素

:nth-child(数字n)　数字×n番目の要素(例：3の倍数毎)

:nth-child(odd)　奇数番目の要素

:nth-child(even)　偶数番目の要素

:first-child　最初の要素

:last-child　最後の要素

:nth-last-child(数字)　最後からn番目の要素

:not(:nth-child(数字))　n番目以外の要素

:only-child　子要素が一つの場合だけに適用

:nth-of-type(数字)　親子関係にある指定したn番目の要素

:first-of-type　親子関係にある指定した最初の要素

:last-of-type　親子関係にある指定した最後の要素

:nth-last-of-type(数字)　親子関係にある指定した最後からn番目の要素

:only-of-type　該当する子要素が一つの場合だけ適用

:empty　要素の中身が空の時だけ指定

では順番に見ていきましょう。

なお、:hoverと:active、:checkedについては長くなるので別にして解説します。

[予備知識]

■:nth-child(数字)について■

以下でそれぞれを解説していきますが、似ていて紛らわしいので先に混乱しないようにお話ししておきます。

:nth-child(数字)は親要素の下の子要素に対して○番目の要素を指定する疑似クラスです。

<ul>
  <li>①</li>
  <li>②</li>
  <li>③</li>
  <li>④</li>
  <li>⑤</li>
</ul>

例えばCSSでul li:nth-child(3)とセレクタを指定した場合は③が指定されます。

<li>が5つあったなかで3つ目になります。もし3つ目が<li>ではなかった場合はエラーとなり該当部分は装飾されません。

■:nth-of-type(数字)について■

:nth-of-type(数字)は親要素の下の子要素で○番目の要素を指定する疑似クラスです。

:nth-child(数字)は親要素下にある子要素全体の○番目を指定しますが、:nth-of-type(数字)は親要素科下にある該当する子要素の○番目を指定します。

<div>
  <p>①</p>
  <div>②</div>
  <p>③</p>
  <div>④</div>
  <p>⑤</p>
  <div>⑥</div>
</div>

:nth-of-type(数字)の場合はCSSでdiv>p:nth-of-type(3)で指定すると<p>の3番目が選択されるので⑤が選択されます。

:nth-child(数字)と:nth-of-type(数字)は似ていますが指定方法が異なるので違いをしっかり理解しておきましょう。

:nth-child(数字)

:nth-child(数字)は子要素のn番目に対してCSSで装飾するという疑似クラスです。

[HTML]

<ul>
  <li>①</li>
  <li>②</li>
  <li>③</li>
  <li>④</li>
  <li>⑤</li>
</ul>

[CSS]

ul li:nth-child(3) {
  color:green;
  border:2px solid gray;
  text-decoration: none;
  background-color:skyblue;
  font-weight:bold;
  list-style-type:none;
}

ul li:nth-child(3)で指定

子要素のうちn番目に該当する要素を装飾します。

:nth-child(数字n)

:nth-child(数字n)は数字×n番目の要素を指定します。(例：n=3ならの3の倍数毎)

[HTML]

<ul>
  <li>①</li>
  <li>②</li>
  <li>③</li>
  <li>④</li>
  <li>⑤</li>
  <li>⑥</li>
</ul>

[CSS]

ul li:nth-child(3n) {
  color:green;
  border:2px solid gray;
  text-decoration: none;
  background-color:skyblue;
  font-weight:bold;
  list-style-type:none;
}

ul li:nth-child(3n)で指定

指定した〇番目の整数n倍の指定が出来ます。

:nth-child(odd)

子要素の奇数番目をしています。

[HTML]

<ul>
  <li>①</li>
  <li>②</li>
  <li>③</li>
  <li>④</li>
  <li>⑤</li>
  <li>⑥</li>
</ul>

[CSS]

ul li:nth-child(odd) {
  color:green;
  border:2px solid gray;
  text-decoration: none;
  background-color:skyblue;
  font-weight:bold;
  list-style-type:none;
}

ul li:nth-child(odd)で指定

これだけでもいいのですが、この後紹介する(even)を使えば縞々デザインが出来ます。

:nth-child(even)

子要素の偶数番目をしています。

[HTML]

<ul>
  <li>①</li>
  <li>②</li>
  <li>③</li>
  <li>④</li>
  <li>⑤</li>
  <li>⑥</li>
</ul>

[CSS]

ul li:nth-child(even) {
  color:green;
  border:2px solid gray;
  text-decoration: none;
  background-color:skyblue;
  font-weight:bold;
  list-style-type:none;
}

ul li:nth-child(even)で指定

奇数は(odd)、偶数は(even)で指定できます。これで交互にデザインする事が出来ます。

:first-childと:last-child

子要素のうちfirstなら最初、lastなら最後の要素だけを指定します。

[HTML]

<ul>
  <li>①</li>
  <li>②</li>
  <li>③</li>
  <li>④</li>
  <li>⑤</li>
  <li>⑥</li>
</ul>

[CSS]

ul li:first-child,
ul li:last-child {
  color:green;
  border:2px solid gray;
  text-decoration: none;
  background-color:skyblue;
  font-weight:bold;
  list-style-type:none;
}

:first-childと:last-child

:first-childで最初を指定、:last-childで最後を指定できます。

:nth-last-child(数字)

:nth-last-child(数字)は子要素の最後からn番目に対してCSSで装飾するという疑似クラスです。

[HTML]

<ul>
  <li>①</li>
  <li>②</li>
  <li>③</li>
  <li>④</li>
  <li>⑤</li>
</ul>

[CSS]

ul li:nth-last-child(2) {
  color:green;
  border:2px solid gray;
  text-decoration: none;
  background-color:skyblue;
  font-weight:bold;
  list-style-type:none;
}

:nth-last-child(2)で指定

子要素のうち最後からn番目に該当する要素を装飾します。ちなみに『:nth-first-child(n)』という指定方法はCSS3まででは存在していません。

:not(:nth-child(数字))

:not(:nth-child(数字)は〇番目以外を指定する方法です。

[HTML]

<ul>
  <li>①</li>
  <li>②</li>
  <li>③</li>
  <li>④</li>
  <li>⑤</li>
</ul>

[CSS]

ul li:not(:nth-child(3)) {
  color:green;
  border:2px solid gray;
  text-decoration: none;
  background-color:skyblue;
  font-weight:bold;
  list-style-type:none;
}

:not(:nth-child(3))で指定

子要素のうちn番目以外に該当する要素を装飾します。また:not(:first-child(数字)や:not(:last-child(数字)でも指定できます。

:only-child

:only-childは子要素が1つの場合のみ指定する方法です。2つ以上子要素を含む場合には対象外となります。

[HTML]


<ul>
  <li>①</li>
  <li>②</li>
  <li>③</li>
  <li>④</li>
</ul>
<ul>
  <li>⑤</li>
</ul>

[CSS]

ul li:only-child {
  color:green;
  border:2px solid gray;
  text-decoration: none;
  background-color:skyblue;
  font-weight:bold;
}

:only-childで指定

子要素(<li>)が⑤だけ1つ独立しているので、⑤だけが装飾されています。

:nth-of-type(n)

:nth-child(n)と:nth-of-type(n)の違いについてはこちらをご覧ください。

nth-of-type(n)は親子関係にある該当する要素の(n)番目にあるものをします。

[HTML]

<div>
  <p>①</p>
  <div>②</div>
  <p>③</p>
  <div>④</div>
  <p>⑤</p>
  <div>⑥</div>
</div>

[CSS]

div>p:nth-of-type(3) {
  color:green;
  border:2px solid gray;
  text-decoration: none;
  background-color:skyblue;
  font-weight:bold;
}

:nth-of-type(3)で指定

①

②

③

④

⑤

⑥

nth-of-type(n)は親子関係にある該当する要素の(n)番目を指定しているので、今回ならばdiv>p:nth-of-type(3)で親要素<div>タグの下にある3番目の<p>タグを指定していることになるので<p>⑤</p>が選択されています。

:first-of-typeと:last-of-type

:first-childと:first-of-typeの違いについてはこちらをご覧ください。

:first-of-typeと:last-of-typeは親子関係にある該当する要素の最初(最後)にあるものをします。

[HTML]

<div>
  <p>①</p>
  <div>②</div>
  <p>③</p>
  <div>④</div>
  <p>⑤</p>
  <div>⑥</div>
</div>

[CSS]

div>p:first-of-type,
div>p:last-of-type {
  color:green;
  border:2px solid gray;
  text-decoration: none;
  background-color:skyblue;
  font-weight:bold;
}

:first-of-typeとlast-of-type

①

②

③

④

⑤

⑥

div>p:first-of-typeで<p>①</p>が、div>p:last-of-typeで<p>⑤</p>が選択されています。

:last-childであれば単純に最後の子要素である<div>⑥</div>が選択されますが、div>p:last-of-typeでは最後にくるdiv>pの条件を満たしているものを指します。

:nth-last-of-type(n)

:nth-last-child(数字)と:nth-last-of-type(n)の違いについてはこちらをご覧ください。

:nth-last-of-type(n)では親子関係にある指定した最後からn番目の要素を指定します。

[HTML]

<div>
  <p>①</p>
  <div>②</div>
  <p>③</p>
  <div>④</div>
  <p>⑤</p>
  <div>⑥</div>
</div>

[CSS]

div>p:nth-last-of-type(2) {
  color:green;
  border:2px solid gray;
  text-decoration: none;
  background-color:skyblue;
  font-weight:bold;
}

:nth-last-of-type(2)で指定

①

②

③

④

⑤

⑥

nth-last-of-type(n)は親子関係にある該当する要素の最後から(n)番目を指定しているので、今回ならばdiv>p:nth-last-of-type(2)で親要素<div>タグの下にある最後から2番目の<p>タグを指定していることになるので<p>③</p>が選択されています。

:only-of-type

:only-childと:only-of-typeの違いについてはこちらをご覧ください。

:only-of-typeは親要素内で指定した子要素が1つの場合に適用されます。

[HTML]

<div class="pseudo-class11">
    <p>①</p>
    <p>②</p>
    <p>③</p>
  </div>
  <div class="pseudo-class11">
    <div>④</div>
    <p>⑤</p>
    <li>⑥</li>
  </div>
  <div class="pseudo-class11">
    <p>⑦</p>
  </div>

[CSS]

.pseudo-class11>p:only-of-type {
  color:green;
  border:2px solid gray;
  text-decoration: none;
  background-color:skyblue;
  font-weight:bold;
  list-style-type:none;
}

:only-of-typeで指定

①

②

③

④

⑤

⑥

⑦

class=”pseudo-class11″直下で<p>タグが直下内で1つの場合だけCSSが適用されています。

:empty

:emptyは要素が空っぽの時にだけ適用されます。

[HTML]

<ul>
  <li>①</li>
  <li>②</li>
  <li>③</li>
  <li></li>
  <li>⑤</li>
  <li>⑥</li>
</ul>

[CSS]

ul li:empty {
  color:green;
  border:2px solid gray;
  text-decoration: none;
  background-color:skyblue;
  font-weight:bold;
}

ul li:emptyで指定

④にあたる部分を空にしたので、そこだけ適用されます。実際に使える例としては<table>タグと一緒というのが考えられます。以下の例を見てみましょう。

[HTML]

<table>
 <tr><th氏名></th><<th>年齢></th><th備考></th></tr>
  <tr><td猫田　犬男></td><<td>22></td><td>動物です</td></tr>
  <tr><td空野　奏多></td><<td>32></td><td></td></tr>
  <tr><td独田　身太></td><<td>40></td><td></td></tr>
</table>

[CSS]

table {
  border-collapse: collapse;
  border:solid 3px royalblue;
}

td:empty {
  background-color:silver;
}

氏名	年齢	備考
猫田　犬男	22	動物です
空野　奏多	32
独田　身太	40

　
情報が入っていないセルに対して色掛けをするなどすれば、入力漏れなのか本当に空欄なのかユーザーにとって見分けやすくなります。

まとめ

いろいろな種類のセレクタがありますが、まずは知りたいものや使いたいものをつまみ食いしながら自分の持っている指定方法の幅を広げていくのがいいんじゃないかと思います。