【CSS】擬似クラスを使ったCSSセレクタまとめ

コーディングを進めている時に、奇数の要素だけ背景色を変えたい、一番最後のコンテンツの下線だけ無しにしたいと思ったことはありませんか。
そんな時に便利なのが擬似クラスを使ったCSSセレクタです。
今回は擬似クラスを使って指定をするCSSセレクタについてご紹介いたします！

※CSSセレクタについては【CSS】知っていると便利なCSSセレクタまとめの記事でご紹介したため、今回は省略いたします。

コーディング

2021.01.15

【CSS】擬似クラスを使ったCSSセレクタまとめ

コーディングを進めている時に、奇数の要素だけ背景色を変えたい、一番最後のコンテンツの下線だけ無しにしたいと思ったことはありませんか。そんな時に便利なのが擬似クラ…

擬似クラスとは？

まず、擬似クラスとは何かというと、セレクタの後に付け加えて特定の状況の場合にのみスタイルを適用させるものです。
1番目、2番目や奇数、偶数といった場合に見た目を変えたい時にHTMLでそれぞれにclassを割り振らずに見た目を変えることができます。
記述をする際にはセレクタの後に「:」を付けて指定をします。

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

似ている名前に擬似要素がありますが、こちらは今回ご紹介する擬似クラスとは少し違ったものになります。
擬似クラスが指定したもの全体を指定するのに対し、擬似要素は指定した要素の一部に対して影響を与えます。

【例】
・nth-of-type(1)→1番目の要素全体（擬似クラス）
・first-letter→要素の一文字目を指定（擬似要素）

この例のように「1番目の要素にクラスを与えて変更するような指定をしたい場合」は擬似クラス、「一文字目に<span>の要素を追加して変更するような指定をしたい場合」は擬似要素と考えていただけると覚えやすいと思います。

リンクに使われる擬似クラス

a:link

aタグやaタグに付けたclassに「:link」を付けると、そのリンクが未訪問の状態の時のスタイルを指定することができます。

<!-- HTML -->
 
<a href="dummy" class="link">テキスト</a>

/* CSS */

/* 全てのaタグに対しての指定 */
a:link{
   font-size:14px;
   color:#333;
}
/* classがある場合の指定 */
.link:link{
   color:#000;
}

a:visited

aタグに「:visited」を付けると、そのリンクが訪問済みの状態の時のスタイルを指定することができます。

/* 全てのaタグに対しての指定 */
a:visited{
   color:#333;
}
/* classがある場合の指定 */
.link:visited{
   color:#000;
}

a:hover

aタグに対してマウスをホバーさせた時のスタイルを指定できます。
タブレットやスマホはマウスでホバーさせることがなかなか無いため、指定することはできますが、見た目に影響が出ることは少ないです。
「:hover」を入れているとテキスト内に埋もれてしまいがちなリンクや、どの要素を選択しているかがわかりやすいため、積極的に指定をすることをお勧めします！

/* 全てのaタグに対しての指定 */
a:hover{
   opacity:0.7;
}
/* classがある場合の指定 */
.link:hover{
   color:#000;
}

a:active

aタグの要素をクリックから離すまでのアクティブ状態の時のスタイルを指定できます。

/* 全てのaタグに対しての指定 */
a:active{
   opacity:0.7;
}
/* classがある場合の指定 */
.link:active{
   color:#000;
}

リンクに擬似クラスを指定する場合の注意点

リンクに対して擬似クラスを指定する時、CSSが上から下に読み込まれている都合上、より後ろに書かれている擬似クラスが優先されます。
例えば、「:hover」の後に「:visited」を指定すると、訪問済みのリンクはマウスでホバーした場合にも「:visited」の内容が優先されてしまって適用されなくなります。
それを回避するためにも下記順番で記述をすることをお勧めします！

1　普通のaタグ
2　:link
3　:visited
4　:hover
5　:active

特定の要素を指定する擬似クラス

p:nth-child(n)

親要素内にある要素のn番目にくる要素に対してスタイルを適用させることができます。
次にご紹介する「nth-of-type」とは違い、親要素内にある全ての要素からn番目にくる要素に対する指定となります。

【例】
1番目の要素(aタグ)
2番目の要素(pタグ)
3番目の要素(pタグ)

<!-- HTML -->
 
<div>
	<a href="test">1番目の要素(aタグ)</a>
	<p>2番目の要素(pタグ)</p>
	<p>3番目の要素(pタグ)</p>
</div>

/* css */

/* 上のHTMLの「2番目の要素」に適用されます。 */
div p:nth-child(2){
 color:red;
}

p:nth-of-type(n)

親要素内にある同じ要素がn番目に来る場合に対してスタイルを指定することができます。
「:nth-child」との違いがわかりやすいように全く同じ「2番目のpタグ」に対する指定をすると下記のようになります。

【例】
1番目の要素(aタグ)
2番目の要素(pタグ)
3番目の要素(pタグ)

<!-- HTML -->
 
<div>
	<a href="test">1番目の要素(aタグ)</a>
	<p>2番目の要素(pタグ)</p>
	<p>3番目の要素(pタグ)</p>
</div>

/* css */

/* 上のHTMLの「3番目の要素」に適用されます。 */
div p:nth-of-type(2){
 color:red;
}

div内の要素としては「3番目」ですが、pタグとしては2番目に来るため、「3番目の要素(pタグ)」にスタイルが適用されます。

p:nth-last-child(n) / p:nth-last-of-type(n)

「:nth-child」「:nth-of-type」と同じように後ろからn番目の要素を指定することができます。
一番最後の要素だけ見た目を変えたいという場合に大変便利です！
【例】
1番目の要素(aタグ)
2番目の要素(pタグ)
3番目の要素(pタグ)

<!-- HTML -->
 
<div>
	<a href="test">1番目の要素(aタグ)</a>
	<p>2番目の要素(pタグ)</p>
	<p>3番目の要素(pタグ)</p>
</div>

/* css */

/* どちらの記述でも一番最後の要素に適用されます */
div p:nth-last-child(1){
 color:red;
}
div p:nth-last-of-type(1){
 color:red;
}

:not(n)

特定の要素だけを除外してスタイルを適用させたい場合は「:not」で指定をします。
属性に対する指定をしたい場合は()の中にさらに[]を入れる、([href])、([href=”test”])のように指定します。

<!-- HTML -->

<div>
	<h1>見出し</h1>
	<p class="text">テキスト1</p>
	<p>テキスト2</p>
	<a href="test">テキスト3</a>
</div>

/* css */

/* divタグ内のpタグを除外 */
div :not(p){
 margin-top: 10px;
}
/* divタグ内のtestのclassがある場合を除外 */
div :not(.test){
 padding-top: 10px;
}
/* divタグ内のhrefなど属性がある場合に除外 */
div :not([href]){
 color: #000;
}

下記のように指定をすると、「pの中でもtestのclassがある場合は除外」というスタイルの適用ができます。

div p:not(.test){
 display:none;
}

擬似クラスを用いた指定をするとHTMLの余分な記述を減らしたり、作業を効率よく進めることができて大変便利です！
ぜひご活用ください！