【初心者OK】CSS疑似クラスの種類と書き方 超簡単に解説

これからCSSを勉強してみたいと考えている方向けに、超簡単に噛み砕いて解説しています。どんな感じなのかなぁ～、くらいの興味でオッケーです。

今回はCSSの疑似クラスについて書いています。基本セレクターに加え、疑似クラスを上手く使えると、効率的に書けるだけでなく、さらに表現の幅も広がります。

小難しい事はあえて書いてません。

基本セレクターを先に知っておくと理解が早くなりますよ。

【初心者OK】CSS基本セレククターの種類と書き方を基礎から解説

2022年2月20日

「もう知ってるよー」って所は読み飛ばしても大丈夫です。

CSSセレクターとは（CSSの基礎・HTMLの予備知識）

CSSは、HTMLで作られた構造に対して文字の色やレイアウトの指定など、見た目の調整を行うもの。その調整をどこにするのかを指定する時に使うのが「CSSセレクター」です。

HTMLとCSSはそれぞれ役割が違うんだね

この記事では「CSS疑似クラス」というものを説明していきます。

「もう知ってるよー」って方は、「CSS疑似クラスとは？」の項目へどうぞ

予備知識：HTMLの構造

CSSを理解する前にまずHTMLがどのような仕組みか知っていると理解が深まります。

HTMLはタグと呼ばれる記号で構成されています。
開始タグと終了タグがあり、文章などの情報をこのタグで囲むことにより意味を持ちます。そして、この開始タグから終了タグで囲われた所を「要素」といいます。

タグによって使えるものに違いはありますが、「属性」とその値である、「属性値」を指定出来ます。
後で紹介する「id」や「class」も、「属性」と「属性値」になります。

さらに、要素をタグで囲むことも出来ます。「入れ子」と言ったりもします。
下の図だと、三つの要素は階層構造になっています。
外側の要素を「親要素」、内側の要素を「子要素」といい、子要素のさらに内側が「孫要素」です。

CSSの基本文法

CSSは、「セレクター」「プロパティ」「値」の3つで構成されています。
セレクターで指定する事により、デザインの適用先を選択しています。

CSSを適用する事を、「CSSを掛ける」と言ったりするよ。

CSS疑似クラスとは？

擬似クラスとは指定の要素が特定の状態である場合にスタイルを適用させるセレクタです。
文章構造にある情報によってスタイルを変化させることができます。

CSSにおける疑似クラスはセレクタに付加するキーワードのことで、選択される要素の特定の状態のスタイルを指定するものです。

リンクに関する疑似クラス

実は普段何気なく押しているリンクも疑似クラスです。リンクは何も装飾をしていない場合、青色のテキストと下線がひかれた状態で表示されます。
でも多くの場合、サイトのイメージに合わない為、何かしらの装飾を加えている場合が多いです。

リンクには記述する順番がある

リンクの疑似クラスは関連するものを入れて全部で4つあります。記述する順番が決まっているので気を付けましょう。

表示結果は、分かり易いようにタグを付けて表示しているよ。

1．a:link（未訪問時の要素へ指定）

:link疑似クラスは、まだ訪問されていない要素に対してスタイルを指定します。
対象は<a>、<area>、<link>など、href属性を持つ未訪問の要素です。

■ HTML
<a href="#">お問い合わせはコチラ</a>
■ CSS
a:link {
  color: #0FB813;
}

2．a:visited（訪問済みの要素へ指定）

:visited疑似クラスは、ユーザーがすでに訪問したリンクに対してスタイルを指定します。

■ HTML
<a href="#">お問い合わせはコチラ</a>
■ CSS
p {
  color: #ff3c07;
}

3．X:hover（マウス等がホバーした要素へ指定）

:hover疑似クラスは、要素に対してマウス等のポインターがホバーした時のスタイルを指定します。

■ HTML
<a href="#">お問い合わせはコチラ</a>
■ CSS
.sample {
  color: #f7a51b;
}

4．X:active（アクティブな状態の要素へ指定）

:active疑似クラスは、まだ訪問されていない要素に対してスタイルを適用します。
対象は<a>、<button>要素で使われます。

■ HTML
<a href="#">お問い合わせはコチラ</a>
■ CSS
#sample {
  color: #00bce9;
}

「何番目か」絞り込んだ要素に適用する疑似クラス

リストや見出し等、同じ要素が沢山ある時に「絞り込んでスタイルを適用させたい時」に使うと凄く便利です。

5．X:first-child（兄弟要素の中で最初の要素に指定）

よくある使い方は、リストに付けた一番最初の下線やグローバルナビの区切り線を消したり、最初の要素だけ色の変更や余白の調整をするなどですね。

■ HTML
<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>
■ CSS
ul li {
  color: #0a1218;
}
ul li:first-child {
  color: #00bce9;
}

6．X:last-child（兄弟要素の中で最後の要素に指定）

５.のfirst-childと真逆で、リストに付けた一番最後の下線やグローバルナビの区切り線を消したり、最後の要素だけ色の変更や余白の調整をする場合などで使います。

■ HTML
<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>
■ CSS
ul li {
  color: #0a1218;
}
ul li:last-child {
  color: #00bce9;
}

7．X:nth-child(odd,even)（兄弟要素の中で偶数行もしくは奇数行に指定）

nth-child(odd)、nth-child(even)は、それぞれ偶数行、奇数行に対してスタイルを適用できます。
テーブルとかリストの背景をストライプ状にする時なんかに便利です。

■ HTML
<ul>
  <li>リスト 1</li>
  <li>リスト 2</li>
  <li>リスト 3</li>
  <li>リスト 4</li>
</ul>
■ CSS
ul li {
  color: #0a1218;
}
ul li:nth-child(odd) {/*奇数番目のliだけ背景色を変える場合*/
  color: #00bce9;
}
ul li:nth-child(even) {/*偶数番目のliだけ背景色を変える場合*/
  color: #00bce9;
}

8．X:nth-child(An+B)（兄弟要素の中でn番目の要素か絞り込んで指定）

リスト中の「An+B」番目の要素に対してスタイルを指定します。n番目のnは０番目からカウントします。

■ HTML
<ul>
  <li>リスト 1</li>
  <li>リスト 2</li>
  <li>リスト 3</li>
  <li>リスト 4</li>
</ul>
■ CSS
ul li {
  color: #0a1218;
}
ul li:nth-child(3) {/*3番目のliだけ背景色を変える*/
  background: #00bce9;
}

まとめ：疑似クラス編

今回は良く使う疑似クラスを紹介いたしました。他にもまだ沢山の疑似クラスがあるのですが、使い勝手などを考えると他のセレクターで代用してもいいのかなと思います。

とは言え、どうしても効率的にスタイルを掛けるのが難しい時はマニュアルを検索してみて下さいね。

この他にもセレクターはあるのでこの記事と合わせてご覧ください。表現の幅が広がりますよ。

【初心者OK】CSS基本セレククターの種類と書き方を基礎から解説

2022年2月20日