擬似クラスの使い方

2020年12月19日CSS

擬似クラスは、セレクターに付加するキーワードのことで、選択された要素に対して特定の状態を指定します。
例えば、クリックしたとき、とかマウスでホバーしたとき、といった特定の状態のときに、CSSでスタイリングできます。
おしゃれなWebサイトではとてもよく使われているので、しっかりと学んでいきましょう。

擬似クラスの使い方

擬似クラスはコロンがひとつだけ必要です。
擬似クラスはたくさんあり、それぞれ使う場面が違うので、
各々の具体例をみていきましょう。

:hover擬似クラスの使い方

最もよく使われている擬似クラスのひとつが、:hover擬似クラスです。
例えば、ボタンやナビゲーションバーにカーソルをあわせると色が変わったりするスタイリングをすることができます。

<div class="btn">OK</div>
.btn {
  width: 100px;
  background: skyblue;
  text-align: center;
  padding: 4px;
  color: white;
  cursor: pointer;
}

.btn:hover {
  opacity: 0.8;
}

:nth-child擬似クラス

:nth-child擬似クラスは、兄弟要素のグループの中での位置に基づいて選択できる擬似クラスです。
:nth-child擬似クラスは、要素は考慮できません。

使いこなせるとかなり便利な擬似クラスです。

:nth-child()の()の中には引数を入れて使います。

引数はいろいろあるので、下の例をみてみましょう。

ここでは、mainタグの中に複数要素があるとします。

  • main > :nth-child(3) で3番目だけをスタイリングできます。
  • main > :nth-child(3n) でnが自然数の1,2,3が入る。つまり3の倍数だけをスタイリングできます。
  • main > :nth-child(odd) oddで奇数だけをスタイリングできます。
  • main > :nth-child(even) evenで偶数番だけをスタイリングできます。
  • main > :first-child　最初だけをスタイリングできます。
  • main > :last-child 　最後だけをスタイリングできます。

 

  <main>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
  </main>

main > :nth-child(3) {
  background: pink;
} 

main > :nth-child(3n) {
  background: pink;
} 

main > :nth-child(odd) {
  background: pink;
}

main > :nth-child(even) {
  background: skyblue;
} 

main > :first-child {
  background: pink;
}

main > :last-child {
  background: skyblue;
}

 

:nth-of-type擬似クラス

:nth-of-type擬似クラスは、兄弟要素の要素の位置に基づいて選択する擬似クラスです。
:nth-child擬似クラスは、要素は考慮できませんが、:nth-of-type擬似クラスは要素が考慮できる点が最大の違いです。
そのため、要素を考慮したいときに、:nth-of-type擬似クラスを使います。

  • main > h2:nth-of-type(3) 　mainの中のh2の3番目のものをスタイリングできます。
  • main > h2:nth-of-type(odd)　oddで奇数だけをスタイリングできます。
  • main > h2:nth-of-type(even)　evenで偶数だけをスタイリングできます。

また、:first-of-type擬似クラスで最初、:last-of-type擬似クラスでラストをスタイリングできます。

 <main>
    <h1>見出し</h1>
    <p>こんにちは。</p>
    <p>こんにちは。</p>
    <h2>見出し</h2>
    <p>こんにちは。</p>
    <p>こんにちは。</p>
    <h2>見出し</h2>
    <p>こんにちは。</p>
    <h2>見出し</h2>
    <p>こんにちは。</p>
    <p>こんにちは。</p>
    <p>こんにちは。</p>
    <p>こんにちは。</p>
    <h2>見出し</h2>
    <p>こんにちは。</p>
  </main>
/* main > h2:nth-of-type(3) {
  background: pink;
} */

/* main > h2:nth-of-type(even) {
  background: pink;
} */

main > h2:first-of-type {
  background: pink;
}

main > h2:last-of-type {
  background: skyblue;
}

 

:empty擬似クラス

空の要素だけスタイリングしたいとき:empty擬似クラスを使います。
半角空白や改行があると、空とみなされないので注意しましょう。
コメントだけ書かれている場合は空として認識されます。

<ul>
    <li>項目</li>
    <li></li>
    <li> </li>
    <li>

    </li>
    <li><!-- コメント --></li>
    <li>項目</li>
  </ul>


li:empty {
  background: skyblue;
}

:not擬似クラス

「〜でないもの」と否定形で指定したい場合に使える擬似クラスが:not擬似クラスです。
たとえば、li:not(:empty)なら、リストのemptyでないものだけをスタイリングすることができます。

<ul>
    <li>項目</li>
    <li></li>
    <li> </li>
    <li>

    </li>
    <li><!-- コメント --></li>
    <li>項目</li>
  </ul>


li:not(:empty) {
  background: skyblue;
}

 

擬似要素と言葉も似ていて混乱してしまうため、疑似要素と疑似クラスの違いを理解しておきましょう。

疑似要素と疑似クラスの違い

擬似要素は、要素の特定の部分にスタイルを適用するために使用します。例えば、h1の先頭にマークをつけたいとか。
擬似クラスは、要素の状態に応じてスタイリングします。例えば、ホバーしたときにボタンの色を薄くしたいとか。
また、擬似要素はコロン2つつけるのに対し、擬似クラスはコロン一つです。

 

CSS

Posted by devsakaso