BLOG ブログ

ホームページ制作
BLOG
【CSS】擬似クラスを使いこなそう！:not()や:nth-child()の使い方

【CSS】擬似クラスを使いこなそう！:not()や:nth-child()の使い方

更新日：2021/08/31

コーディングでは、他人から見たとき見やすいコードにすることを心がけますよね。
先輩が書いたコードを見るとなんか見やすいなって思うんです。
そこで、見やすいコードと見にくいコードの何が違うのだろうと考えたときに、不要なタグやクラスがなく、全体がすっきりしていることが見やすいコードへの近道だと感じました！

ということで、今回は不要なクラス指定をせずにCSS側で要素を操れる擬似クラスを紹介していこうと思います。

1 擬似クラスとは
2 擬似クラスの使い方
- 2.1 CSS
- 2.2 SCSS
3 よく使う擬似クラスを紹介
4 まとめ

擬似クラスとは

擬似クラスとは要素の状態により、スタイルの指定をすることができるクラスです。
そのため、不要なクラスをつける必要がなくなり、すっきりとしたコードにすることができます。
どれくらいコードがすっきりするのか以下で比較をしてみました。

Before
擬似クラス未使用のため、クラスをつける必要があり、コードが見づらい。


<ul class="list">
  <li class="first">1番目</li>
  <li class="list02">2番目</li>
  <li class="list03">3番目</li>
  <li class="list04">4番目</li>
  <li class="last">5番目</li>
</ul>

</ul>

After
擬似クラスを使用したため、クラスの使用が最低限になり、コードが見やすい。


<ul class="list">
  <li>1番目</li>
  <li>2番目</li>
  <li>3番目</li>
  <li>4番目</li>
  <li>5番目</li>
</ul>

</ul>

すっきり度が一目瞭然ですね！
この違いを見ると、擬似クラスを使いたくなりますよね。

擬似クラスの使い方

それでは擬似クラスの使い方から紹介していきます。

CSS



.ttl{
  font-size: 20px;
  font-weight: bold;
  transition: 0.3s ease-in-out;
}
.ttl:hover{  //ここ！！
  opacity: 0.8;
}

.ttl{

font-size: 20px;

font-weight: bold;

transition: 0.3s ease-in-out;

}

.ttl:hover{ //ここ！！

opacity: 0.8;

}

CSSでは、クラス名(ID名やタグでも可):擬似クラス名 と記述します。
ですので擬似クラス:hoverを使いたい場合は、上記コードのように .ttl:hover となります。

SCSS



.ttl{
  font-size: 20px;
  font-weight: bold;
  transition: 0.3s ease-in-out;

  &:hover{　//ここ！！
    opacity: 0.8;
  }
}

.ttl{

font-size: 20px;

font-weight: bold;

transition: 0.3s ease-in-out;

&:hover{　//ここ！！

opacity: 0.8;

}

SCSSは入れ子にすることが出来るので、非常に便利です。
.ttl内に、&:擬似クラス名 と記述します。
ですので擬似クラス:hoverを使いたい場合は、上記コードのように &:hover となります。

よく使う擬似クラスを紹介

※説明ではすべてSCSSの書き方となっています。
　CSSをお使いの方は、こちらの書き方を参考にしてください。

:hover

こちらは、マウスが上に乗った時にスタイルを変化させたい時に使用します。
また、マウスが上に乗っている状態をホバー又はマウスホバーと呼びます。

※:hoverはPCのみで使用しましょう。
※:hover を使用するときは、スタイルの変化を滑らかに行うためにtransitionを指定しましょう。

色や透明度を指定


.content{
    transition: 0.3s ease-in-out;　//☆transition

  @media screen and (min-width: 980px){　//PCのみ適用
    &:hover{
      background-color: #333;　//要素の色
      color: #fff;　//テキストの色
      opacity: 0.8;　//透明度
    }
  }
}

.content{

transition: 0.3s ease-in-out;　//☆transition

@media screen and (min-width: 980px){　//PCのみ適用

&:hover{

background-color: #333;　//要素の色

color: #fff;　//テキストの色

opacity: 0.8;　//透明度

}

色や透明度を変える

要素の大きさを指定


.content{
    transition: 0.3s ease-in-out;　//☆transition

  @media screen and (min-width: 980px){　//PCのみ適用
    &:hover{
      transform: scale(1.03);　//大きさ
    }
  }
}

.content{

transition: 0.3s ease-in-out;　//☆transition

@media screen and (min-width: 980px){　//PCのみ適用

&:hover{

transform: scale(1.03);　//大きさ

}

大きさを変える

-child

続いては、-childを紹介します。
-childは、応用がきいて非常に便利な擬似クラスの1つだと思っています。
主に使用するのは以下3クラスです。

:first-child

兄弟グループで一番最初の要素を指定


.box{
   &:first-child{
     background-color: blue;
   }
 }

.box{

&:first-child{

background-color: blue;

}

要素1
要素2
要素3
要素4

:last-child

兄弟グループで一番最後の要素を指定


.box{
    &:last-child{
      background-color: red;
    }
  }

.box{

&:last-child{

background-color: red;

}

要素1
要素2
要素3
要素4

:nth-child()

兄弟グループ内での位置を()内に指定

2番目の要素を指定


.box{
  &:nth-child(2){
    background-color: yellow;
    color:#333;
  }
}

.box{

&:nth-child(2){

background-color: yellow;

color:#333;

}

要素1
要素2
要素3
要素4

毎3番目の要素を指定


.box{
  &:nth-child(3n){
    background-color: green;
  }
}

.box{

&:nth-child(3n){

background-color: green;

}

要素1
要素2
要素3
要素4
要素5
要素6
要素7
要素8

偶数個を指定


.box{
  &:nth-child(2n 又は even){
    background-color: orange;
  }
}

.box{

&:nth-child(2n 又は even){

background-color: orange;

}

要素1
要素2
要素3
要素4
要素5
要素6
要素7
要素8

奇数個を指定


.box{
  &:nth-child(2n+1 又は odd){
    background-color: pink;
  }
}

.box{

&:nth-child(2n+1 又は odd){

background-color: pink;

}

要素1
要素2
要素3
要素4
要素5
要素6
要素7
要素8

前から4番目以降を指定


.box{
  &:nth-child(n+4){
    background-color: violet;
  }
}

.box{

&:nth-child(n+4){

background-color: violet;

}

要素1
要素2
要素3
要素4
要素5
要素6
要素7
要素8

-of-type

続いては-of-typeです。
指定方法は-childと同じなのでこちらで、-child ➡ -of-type で以下リストのように変換して考えてください。

:first-child ➡ :first-of-type
:last-child ➡ :last-of-type
:nth-child() ➡ :nth-of-type()

-child と -of-typeの違い

-childと-of-typeが混同してあまり違いが判らないという方もいるのではないでしょうか？
このブログで-childと-of-typeの違いをはっきりさせてしまいましょう！

-childと-of-typeのいったい何が違うのかといいますと、-childはタグやクラスに関係なく同階層でカウントされ、-of-typeは指定したタグやクラス内でカウントされます。

どういうことなのかは、以下を見て理解を深めましょう。

:first-childと:first-of-typeの指定①

HTML


<div class="content">
  <ul class="list">
    <li>1番目</li>
    <li>2番目</li>
    <li>3番目</li>
  </ul>
</div>

</ul>

</div>

:first-child


.list{
  li{
    &:first-child{
      background-color: darkred;
    }
  }
}

.list{

li{

&:first-child{

background-color: darkred;

}

結果

1番目
2番目
3番目

:first-of-type


.list{
  li{
    &:first-of-type{
      background-color: darkblue;
    }
  }
}

.list{

li{

&:first-of-type{

background-color: darkblue;

}

結果

1番目
2番目
3番目

この場合は、どちらも「1番目」にスタイルが当たっていますね。
:first-childと:first-of-typeは同じじゃないかと思うかもしれませんが、次の例を見ていただければ違いを実感できると思います。

:first-childと:first-of-typeの指定②

HTML


<div class="content">
  <div>黒<div>
  <p>青</p>  //スタイルをあてたい
  <p>黒</p>
</div>

<p>青</p> //スタイルをあてたい

</div>

:first-child


.content{
  p{
    &:first-child{
      background: blue;
    }
  }
}

.content{

&:first-child{

background: blue;

}

結果

黒

青

黒

一番最初のpタグを指定したはずなのに、スタイルがあたっていませんね。
:first-childでは指定したpタグの階層の要素すべてがカウント対象になります。
そのため、今回指定したいpタグのカウントは、nth-child(2)（階層内で2個目の要素）となります。

:first-of-type


.content{
  p{
    &:first-of-type{
      background-color: blue;
    }
  }
}

.content{

&:first-of-type{

background-color: blue;

}

結果

黒

青

黒

:first-of-typeでは指定したタグやクラス内での、一番最初の要素にスタイルがあたります。
今回だと、同階層内のpタグがカウント対象となりますので希望通り、最初のpタグにスタイルがあたっています。

:not()

こちらは、ある要素やタグを排除して指定したい時に使用します。

指定方法


p{
   &:not(排除したいタグ・クラス){
      background-color: #000;
   }
 }

&:not(排除したいタグ・クラス){

background-color: #000;

}

クラスの排除を指定

HTML


<div class="content">
  <ul class="list">
    <li>1番目</li>
    <li>2番目</li>
    <li class="black">3番目</li>
  </ul>
</div>

</ul>

</div>

SCSS
「black」クラスを排除する


.list{
  li{
    &:not(.black){
      color: red;
    }
  }
}

.list{

li{

&:not(.black){

color: red;

}

結果

1番目
2番目
3番目

「black」クラスをつけていない要素の文字が赤くなりました。
上手く「black」クラスを排除できたことがわかりますね。

擬似クラスの排除を指定

HTML


<div class="content">
  <ul class="list">
    <li>1番目</li>
    <li>2番目</li>
    <li>3番目</li>
  </ul>
</div>

</ul>

</div>

SCSS
一番最初の要素を排除する


.list{
  li{
    &:not(:first-child){
      color: green;
    }
  }
}

.list{

li{

&:not(:first-child){

color: green;

}

結果

1番目
2番目
3番目

指定通り、一番最初の要素が排除されていますね。
このように、:not()内に排除したい要素を入れると簡単に特定の要素を除外できます。
:not() × 擬似クラスの組み合わせは使い勝手が良いので、ぜひ覚えておいてください！

※ 入れ子は出来ないので注意！
Ex) :not(:not())
※ 擬似要素は指定できないので注意！
Ex) :not( .text :after)

まとめ

擬似クラスの便利さが少しでも伝わりましたか？
自分に理解できたものから、少しずつ使ってみましょう。
思い通りにいかず、あれ？と思ったときは、色々試してみると理解につながるかもしれませんね。

擬似クラスを自由自在に使えたら、コーディングはかなりしやすくなります。
それに不要なクラス命名が減り、コードがすっきりするので、使わないほかないんです。
少しずつ使い方を覚えて、綺麗で見やすいコードを心がけましょう！

コーディング

一覧へ戻る

BLOG ブログ

【CSS】擬似クラスを使いこなそう！:not()や:nth-child()の使い方

擬似クラスとは

擬似クラスの使い方

CSS

SCSS

よく使う擬似クラスを紹介

:hover

色や透明度を指定

要素の大きさを指定

-child

:first-child

:last-child

:nth-child()

2番目の要素を指定

毎3番目の要素を指定

偶数個を指定

奇数個を指定

前から4番目以降を指定

-of-type

-child と -of-typeの違い

:first-childと:first-of-typeの指定①

:first-childと:first-of-typeの指定②

:not()

指定方法

クラスの排除を指定

擬似クラスの排除を指定

まとめ

関連記事

先輩社員の声 VOICES

CONTACT お問い合わせ

BLOG ブログ

【CSS】擬似クラスを使いこなそう！:not()や:nth-child()の使い方

擬似クラスとは

擬似クラスの使い方

CSS

SCSS

よく使う擬似クラスを紹介

:hover

色や透明度を指定

要素の大きさを指定

-child

:first-child

:last-child

:nth-child()

2番目の要素を指定

毎3番目の要素を指定

偶数個を指定

奇数個を指定

前から4番目以降を指定

-of-type

-child と -of-typeの違い

:first-childと:first-of-typeの指定①

:first-childと:first-of-typeの指定②

:not()

指定方法

クラスの排除を指定

擬似クラスの排除を指定

まとめ

FOLLOW US 最新の情報をお届けします

関連記事

先輩社員の声 VOICES

CONTACT お問い合わせ