CSSセレクタまとめ、種類別に徹底解説（CSS3対応）

CSSセレクタとは？

セレクタとは、 スタイルを適応する対象を指定するもの です。 webサイトを作成するうえで「このタグだけ文字サイズを変更したい」「このタグだけ文字色を変更したい」といったシーンがたくさんあると思います。 そんなときに「どのタグを変更するのか」指定するために使います。

セレクタを上手に使えないと、CSSを更新した時に予想外のところまで一緒に変更されてしまいサイトのレイアウトが崩れる原因になります。 セレクタはなるべく限定的に指定するのが理想でしょう。

CSSセレクタの種類まとめ

CSSセレクタには様々な種類があります。 セレクタを上手に指定することで、思い通りのスタイルを適用できます。 セレクタを正しく理解して、更新性の高いCSSを目指しましょう。

ここでは便利なセレクタをまとめたので一覧でご紹介します。

要素セレクタ

セレクタに 要素名 を使用すると、指定した全ての要素にスタイルが適用されます。

sample.css

/* 全ての h1 タグに適用 */
h1 {
  color: red;
}

/* 全ての div タグに適用 */
div {
  color: blue;
}

sample.html

<h1>このテキストは赤くなる</h1>
<div>このテキストは青くなる</div>
<p>pタグにはスタイルが適用されない</p>

表示結果

全称セレクタ

セレクタに *（アスタリスク） を使用すると、全ての要素にスタイルが適用されます。

sample.css

/* 全てのタグに適用 */
* {
  font-size: 12px;
}

sample.html

<h1>h1タグも12px</h1>
<div>divタグも12px</div>
<p>pタグも12px</p>

表示結果

また、要素セレクタのあとに全称セレクタを使用することで 任意の要素内の全ての要素 に適用させることができます。

sample.css

/* div タグ内の全ての要素に適用 */
div * {
  color: red;
}

sample.html

<div>
  <h1>divタグ内の要素なので赤くなる</h1>
  <p>divタグ内の要素なので赤くなる <span>孫要素もあかくなる</span></p>
</div>
<p>divタグ内の要素ではないのであかくならない</p>

表示結果

idセレクタ

任意のidが付いている要素にスタイルが適用されます。 idの前に #（シャープ） をつけることで指定できます。この時、シャープとidの間にスペースがあるとうまく指定できないので気をつけましょう。

sample.css

/* [menu]というidがついている要素に適用 */
 #menu {
  background-color: yellow;
}

sapmle.html

<div id="menu">
  idに[menu]が指定されているので背景色が黄色になる
</div>
<div class="menu">
  [menu]と付いているがclassなので背景色は変わらない
</div>

表示結果

classセレクタ

任意のclassが付いている要素にスタイルが適用されます。 クラス名の前に .（ドット） をつけることで指定できます。この時、ドットとクラス名の間にスペースがあるとうまく指定できないので気をつけましょう。

sapmle.css

/* [item]というclassがついている要素に適用 */
.item {
  color: red;
}

sample.html

<ul>
  <li class="item">classに[item]が指定されているので赤くなる</li>
  <li class="button">classがあるが、[item]ではないので赤くならない</li>
  <li>classがついてないので赤くならない</li>
</ul>
<p class="item">classに[item]が指定されているので赤くなる</p>

表示結果

また、ドットの直前に要素名を指定すると、「任意のclassが付いている要素のみ」にスタイルを適用できます。 この時、要素名とドットの間にスペースがあるとうまく指定できないので気をつけましょう。

sample.css

/* [item]というclassがついている li タグに適用 */
li.item {
  color: red;
}

sample.html

<ul>
  <li class="item">classに[item]が指定されているので赤くなる</li>
  <li class="button">classがあるが、[item]ではないので赤くならない</li>
  <li>classがついてないので赤くならない</li>
</ul>
<p class="item">classに[item]が指定されているのが、liタグではないので赤くならない</p>

表示結果

子孫セレクタ

半角スペースでセレクタを区切ると、指定した要素の中の指定した要素にスタイルが適用されます。

sample.css

/* nav タグ内の a タグに適用 */
nav a {
  color: red;
}

sample.html

<nav>
  <a href="#">ここは赤くなる</a>
</nav>

<div>
  <a href="#">ここは赤くならない</a>
</div>

表示結果

このセレクタを使用して、限定的にスタイルを適用することができます。

sample.css

/* div の中の p の中の a タグに適用 */
div p a {
  color: red;
}

sample.html

<div>
  <a href="#">ここは赤くならない</a>

  <p>
    pタグは赤くならない。 <a href="#">divタグの中のpタグの中のaタグのみ赤くなる</a>
  </p>
</div>

表示結果

子セレクタ

セレクタとセレクタを >（だいなり） で繋ぐことで、ある要素の直下の子要素のみにスタイルが適用されます。 孫要素や兄弟要素には適用されません。

sample.css

/* [text]というclassが付いた div タグの直下の span タグのみに適用 */
div.text > span {
  color: red;
}

sample.html

<div class="text">
  <span>[text]というclassがついたdivタグの直下のspan(子要素)なので赤くなる</span>
  <p>
    <span>[text]というclassがついたdivの中のpの中のspan(孫要素)なので赤くならない</span>
  </p>
</div>
<div>
  <span>classがついてないdivの直下なので赤くならない</span>
</div>

表示結果

また、全称セレクタとあわせることである要素の中の全ての子要素にスタイルが適用されます。

sample.css

/* p タグ内の全ての子要素に適用 */
p > * {
  color: red;
}

sample.html

<p>
  自分自身は赤くならない<br>
  <a href="#">pの子要素なので赤くなる</a><br>
  <span>pの子要素なので赤くなる</span><br>
  <span>
    pの子要素なので赤くなるが、<a href="#">pの孫要素に当たるaは赤くならない</a>
  </span>
</p>

表示結果

隣接セレクタ

間接セレクタは隣接兄弟セレクタとも呼ばれます。

セレクタとセレクタを +（プラス） で繋ぐことで、 ある要素に隣接してる要素 にスタイルが適用されます。

sample.css

/* h1 タグに隣接してる p タグに適用 */
h1 + p {
  color: red;
}

sample.html

<h1>大見出し</h1>
<p>h1に隣接してるので赤くなる</p>
<p>h1に隣接してるので赤くならない</p>

表示結果

間接セレクタ

間接セレクタは一般兄弟セレクタとも呼ばれます。

セレクタとセレクタを ~（チルダ） で繋ぐことで、ある要素以降の兄弟要素にスタイルが適用されます。

※間接セレクタはCSS3から登場したセレクタです

sample.css

/* p タグ以降の span タグに適用 */
p ~ span{
  color: red;
}

sample.html

<h1>見出し</h1>
<span>ここは赤くならない</span>
<p>pタグ自身は赤くならない</p>
<span>pタグ以降の兄弟のspanタグなので赤くなる</span>
<div>間に他のタグが入っても</div>
<span>pタグ以降の兄弟のspanタグなので赤くなる</span>
<div><span>孫要素は赤くならない</span></div>

表示結果

属性セレクタ

要素の後に [ ]（かっこ）で属性を指定すると、 任意の属性を持つセレクタにスタイルが適用されます。 また、属性のみでなく設定されてる値を評価してスタイルを適用することもできます。

sample.html

<a href="#" target="_blank">target="_blank"</a>
<a href="#" target="_self">target="_self"</a>
<a href="#" target="_top">target="_top"</a>
<a href="#" target="window">target="window"</a>

※属性セレクタの表示結果は全てこのsample.htmlにスタイルを指定した結果です。

任意の属性をもつ要素を指定

sample.css

/* target属性を持つ a タグに適用 */
a[target]{
  color: red;
}

表示結果

属性の値が任意の文字列の要素を指定

sample.css

/* target属性の値が _blank になっている a タグに適用 */
a[target="_blank"]{
  color: red;
}

表示結果

属性の値が任意の文字列で始まる要素を指定

※[attr^="val"]はCSS3から登場したセレクタです。

sample.css

/* target属性の値が _ で始まる a タグに適用 */
a[target^="_"]{
  color: red;
}

表示結果

属性の値が任意の文字列で終わる要素を選択

※[attr$="val"]はCSS3から登場したセレクタです。

sapmle.css

/* target属性の値が f で終わる a タグに適用 */
a[target$="f"]{
  color: red;
}

表示結果

属性の値に任意の文字列を含む要素を指定

※[attr*="val"]はCSS3から登場したセレクタです。

sample.css

/* target属性の値に o を含む a タグに適用 */
a[target*="o"]{
  color: red;
}

表示結果

リンク擬似クラス

セレクタの後に:link（コロン+link） をつけることで、未訪問のリンクにスタイルを適用することができます。

また、セレクタの後に : visited（コロン+ visited） をつけることで、訪問済みのリンクにスタイルを適用できます。

sample.css

/* 未訪問リンクに適用 */
a:link{
  color: red;
}
/* 訪問済みリンクに適用 */
a:visited{
  color: green;
}

sample.html

<a href="https://www.yahoo.co.jp/">[https://www.yahoo.co.jp/] にアクセスしたことが無いので赤になる</a>
<a href="https://www.google.co.jp/">[https://www.google.co.jp/] にアクセスしたことがあるので緑になる</a><br>

表示結果

:hover擬似クラス

セレクタの後に:hover（コロン+hover）をつけることで、 ある要素にマウスが乗っている間 だけスタイルが適用されます。

例えば、マウスを載せている間は文字色を変更する といったことが出来るようになります。 サンプルではaタグに:hoverを指定していますが、:hover擬似クラスはどのタグにも指定できます。

sample.css

a:hover{
  color: red;
}

sample.html

<a href="#">マウスを乗せている時だけ赤くなる</a><br>
<a href="#">マウスを乗せている時だけ赤くなる</a>

表示結果

:active擬似クラス

セレクタの後に:active（コロン+active）をつけることで、 ある要素をクリックしてから離すまでの間 だけスタイルが適用されます。

sample.css

input:active{
  color: yellow;
}

sample.html

<input type="button" value="ボタン"><br>
<input type="button" value="ボタン">

表示結果

: focus擬似クラス

セレクタの後に:focus（コロン+focus）をつけることで、 ある要素をフォーカスしている間 だけスタイルが適用されます。

フォームの入力中などに用いられることが多いです。

sample.css

textarea:focus{
  background-color: yellow;
}

sample.html

<textarea placeholder="フォーカスしてない">
</textarea>

<textarea placeholder="フォーカスしてる">
</textarea>

表示結果

:first-child疑似クラス

セレクタの後に:first-child（コロン+first-child）をつけることで、 最初に当てはまる要素 だけにスタイルが適用されます。

sample.sass

p{
  color: blue;
}
/* 最初の p タグだけ適用 */
p:first-child{
  color: red;
}

sample.html

<div>
  <p>最初のpは赤くなる</p>
  <p>2番目以降のpは赤くならない</p>
  <p>2番目以降のpは赤くならない</p>
</div>

表示結果

sample.html

<div>
  <div>
    <p>入れ子になっても最初のpが赤くなる</p>
  </div>
  <p>2番目以降のpは赤くならない</p>
  <p>2番目以降のpは赤くならない</p>
</div>

表示結果

:last-child疑似クラス

セレクタの後に:last-child（コロン+last-child）をつけることで、 最後に当てはまる要素 だけにスタイルが適用されます。

sample.sass

p{
  color: blue;
}
/* 最後の p タグだけ適用 */
p:last-child{
  color: red;
}

sample.html

<div>
  <p>最後以外のpは赤くならない</p>
  <p>最後以外のpは赤くならない</p>
  <p>最後のpは赤くなる</p>
</div>

表示結果

sample.html

<div>
  <p>最後以外のpは赤くならない</p>
  <p>最後以外のpは赤くならない</p>
  <div>
    <p>入れ子になっても最後のpが赤くなる</p>
  </div>
</div>

表示結果

:nth-child()疑似クラス

セレクタの後に:nth-child(n)（コロン+nth-child）をつけることで、 最初から数えて「n番目」に当たる子要素 にスタイルが適用されます。 偶数や奇数を指定して交互に色を変更する事もできます。

※:nth-childはCSS3から登場したセレクタです。

3番目の要素を指定

sample.css

/* 3番目の li タグを赤くする */
ul li:nth-child(3){
  color: red;
}

sample.html

<ul>
  <li>1番目のli</li>
  <li>2番目のli</li>
  <li>3番目のliは赤くなる</li>
  <li>4番目のli</li>
  <li>5番目のli</li>
</ul>

表示結果

偶数を指定

偶数を指定するにはカッコの中に 2n もしくは even と書きます。

また、奇数数を指定するにはカッコの中に 2n+1 もしくは odd と書きます。

sample.css

/* 奇数のliに指定 */
/* :nth-child(odd) でも同じ */
li:nth-child(2n+1){
  color: blue;
}

/* 偶数のliに指定 */
/* :nth-child(even) でも同じ */
li:nth-child(2n){
  color: red;
}

sample.html

<ul>
  <li>奇数の行は青くなる</li>
  <li>偶数の行は赤くなる</li>
  <li>奇数の行は青くなる</li>
  <li>偶数の行は赤くなる</li>
  <li>奇数の行は青くなる</li>
  <li>偶数の行は赤くなる</li>
</ul>

表示結果

同時に指定

セレクタを , （カンマ）で区切ることで、同じスタイルを複数の要素に同時に指定できます。

sample.css

/* [red]というclassが付いたdiv タグ、全ての p タグ、全ての span タグに適応 */
div.red, p, span{
  color: red;
}

sapmle.html

<div>[red]というclassがついてないので赤くならない</div>
<div class="red">[red]というclassが付いたdivなので赤くなる</div>
<p>pなので赤くなる</p>
<span>spanなので赤くなる</span>

まとめ

CSSのセレクタについてまとめてご紹介しました。どのセレクタを利用するか悩んだ時など定期的に見返してみてください。