こんなにあるの？？CSSの擬似クラス・擬似要素について調べてみた

Author: T.K Category: CSS

フロントエンド
エンジニア

T.K

皆様こんにちは！
フロントエンドエンジニアのT.Kです。

フロントエンド
エンジニア

T.K

この記事を書いている前日、麻雀で小四喜が出ました。人生初役満です…
びっくりした…小四喜ってああやって出るんですね

フロントエンド
エンジニア

T.K

しかも四麻・自風のみポンという奇跡…
テンションおかしくなって、耳に初ピアスを開けました。
その晩ほぼ寝られませんでした…

(弊社ロジカルスタジオの麻雀事情は下記記事をご参照ください)

あすにゃんのLS社員と○○やってみた！～麻雀編～

 

私の役満のお話はさておき、ここで私のコーディング経験について。

私、コーディングを小学生の頃からやっております。

当時、そのとき全盛であった個人サイト文化に触れて

「ウェブサイト、誰でも気軽に情報を発信できるし、いいなぁ」

と感じていました。

当時は親が買い与えてくれたコーディングの本を参考に、ウェブサイト制作を行っておりました。

 

そして月日は流れ、2019年、ロジカルスタジオに入社してコーディングを学んでいたところ

当時は知らなかったことがいくつかありました。

その一つは擬似クラスの一つである&:emptyクラス。

中が空っぽの要素に特定の外見をつけられると知ったとき

「これはいろいろ用途ありそうやなぁ」

とワクワクしたのが懐かしいです。

 

また、擬似要素もそのうちの一つ。

「ボタンについてる矢印は、::beforeや::afterを駆使して作ることがある」と知って

「こんな魔改造みたいな方法があるんか…」と衝撃を受けたのも今は昔。

 

さて、そんな中必然的に出てくる

「擬似クラスと擬似要素ってどんなものがあるの？どんなことができるの？」

という疑問。

当記事では擬似クラスと擬似要素について、比較的マニアックなものを、いろいろ紹介していきたいと思います。

(この記事自体にも様々な擬似クラスや擬似要素を仕込んでおります。ぜひ探してみてください♡　答えは記事本文で！！)

そもそも擬似クラスと擬似要素とは

擬似クラス

CSS の擬似クラス (pseudo-classes) は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。例えば :hover 擬似クラスで、ユーザーのポインターが当たったときにボタンの色を変更することができます。

出典　擬似クラス – CSS: カスケーディングスタイルシート | MDN

擬似クラスはCSSで、下記のように指定します。

/*基本スタイル*/
a{
  color:#333;
}

/*ホバー時のスタイル*/
a:hover{
  color:#f00:
}

/*要素のホバー時、その要素の関連の要素にもスタイルをあてられる*/
a:hover img{
  transform:scale(1.05);
}

有名なものには下記がありますね。

  • :hover：要素にマウスを乗せたときの外見
  • :first-child：兄弟要素のグループの中で最初の要素の外見
  • :nth-child(X)：兄弟要素のグループの中で、特定の順番の要素の外見（Xの値によって指定）

擬似要素

CSS の 擬似要素 (Pseudo-elements) は、セレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。

出典　擬似要素 – CSS: カスケーディングスタイルシート | MDN

擬似要素も擬似クラス同様に指定できます。

.btn{
  display:block;
  width:200px;
  position:relative;
}

.btn::after{
  content:"→";
  position:absolute;
}

有名なものはやはり下記でしょうか。

  • ::before：選択した要素の最初の子要素として生成される擬似要素
  • ::after：選択した要素の最後の子要素として生成される擬似要素

擬似クラス

ではここからは、私が興味深いと感じた擬似クラスを一挙ご紹介！

:checked

:checked は CSS の擬似クラスセレクターで、ラジオボタン (<input type="radio">)、 チェックボックス (<input type="checkbox">)、 オプションボタン (<select> の中の <option>) 要素がチェックされていたり on の状態にあったりすることを表します。

出典　:checked – CSS: カスケーディングスタイルシート | MDN擬似要素 – CSS: カスケーディングスタイルシート | MDN

:checkedは、チェックされている要素の外見を設定できます。

入力フォームを作るときなどに便利ですね。

そして私が興味深いと感じたことは、

この:checkedを使えば開閉メニューが簡単に作れるということ。

下記をご覧ください。

JSを一切使用することなく、開閉メニューが実装できています！boolean値によって外見を変えたい、そんなときに便利かもしれません。

（なおこのチェックボックスの用法はHTMLの本来のものとは異なるため、この方法はとらないほうがよいとする意見もあります。
私は開閉メニューはJSを用いて作ることが多いです。作り方については私の過去の記事をご参照ください）

 

:target

:target は CSS の擬似クラスで、 URL のフラグメントに一致する id を持つ固有の要素 (対象要素) を表します。

出典　:target – CSS: カスケーディングスタイルシート | MDN

:target を使うと、URLのハッシュ値(#からあとの部分)と同じIDの名を持つ要素に対し、外見を設定できます。

はじめて聞いたときはどういう効果があるのか想像つきにくいですが、百聞は一見に如かず。

例えば、下記の弊社マスコットロージーをクリックしてみてください（ついでにURLにも注目してください）。

ブログ記事_03

弊社マスコット
キャラクター

ロージー

ロージーをクリックするとロージーが反転世界へと旅立つしゅこよ。

この例では、下記のようなCSSを使っています。

#logi-change:target{
    filter:invert(1)
}

ハッシュ値と外見を関連付けできるので、アイデア次第でいろいろ使えそう。

公式ドキュメントにはこれを使ったモーダルウインドウの実装方法が紹介されています。

:valid

:valid は CSS の擬似クラスで、内容物の検証に成功した <input> 要素 やその他の <form> 要素を表します。

出典　:valid – CSS: カスケーディングスタイルシート | MDN

:validはフォーム系タグで、タグの期待する内容が入力されているときの外見を変更できます。

下記は、type="email"のinputタグに適用したものです。メールアドレスとしてふさわしい文字列が入力されている場合、枠が緑になります。

ここで適用したCSSは下記のような感じです。

#pseudo-form-email{
    border:solid 10px black;
}
#pseudo-form-email:valid{
	border:solid 10px green;
}
#pseudo-form-email:invalid{ /*同様に、invalidという擬似クラスもある*/
    border:solid 10px red;
}

入力状態に応じて表示を変えたいときに便利そうです。

隣接セレクタ+を使えば、例えばフォームの横に置いたキャラクターの顔を内容に応じて変更するということも出来ます。

:only-of-type

:only-child は CSS の擬似クラスで、兄弟要素がない要素を表します。 :first-child:last-child または :nth-child(1):nth-last-child(1) と同じですが、詳細度はより低くなります。

出典　:only-child – CSS: カスケーディングスタイルシート | MDN

-of-type系の中でもあんまり有名でないであろう、この擬似クラス。

私は今回この記事を書くにあたって、はじめて知りました…。

一見「これどういうときに使うんや？」と思いがちですが、ECサイトのコーディングとかをやってると案外使い所あったりします。

:fullscreen

:fullscreen は CSS の 擬似クラスで、現在全画面モードにあるすべての要素に一致します。複数の要素が全画面モードにある場合は、それらすべてを選択します。

出典　:fullscreen – CSS: カスケーディングスタイルシート | MDN

この擬似クラスを使用すると、要素が全画面になっているときの外見を指定できます。

下記ボタンを押すと、body要素が全画面になり、画面全体が白黒になります(戻すときはEscボタン/戻るボタンを押してください)。

このようなCSSを記述して実現しています。

body:fullscreen{
	filter:grayscale(1);
}

動画プレーヤーを自作するときとかに使えそうですね。

要素をフルスクリーンにするFullscreen APIについてはこちらをご覧ください。

擬似要素

擬似要素セレクタを使用すれば、

「えっ、そんなところのデザインも変更できるん！！！？？？？」

という箇所も簡単に触れます。

::selection

::selection は CSS の擬似要素で、ユーザーが (テキストをマウスでクリックやドラッグすることで) 選択した文書の一部にスタイルを適用します。

出典　::selection – CSS: カスケーディングスタイルシート | MDN

普段我々がコピーアンドペーストなどで使う、マウスやタップによる文字選択。

この擬似要素を使えば、文字選択箇所のスタイルを変更できます！！！

実はこの記事、文字選択のスタイルを::selectionで変更しております。

この記事中の適当な文字を選択してみてください

具体的には下記のようなCSSを記入しています。

::selection{
    color:#00bfff;
    background-color:#F5C6DB;
}

::-webkit-scrollbar

The ::-webkit-scrollbar CSS pseudo-element affects the style of an element’s scrollbar when it has overflow:scroll; set.

出典　::-webkit-scrollbar – CSS: Cascading Style Sheets | MDN

この擬似要素を使用すると、スクロールバーの色を変更することができます！

細部までこだわりたいあなたにおすすめです

例として、この記事の縦スクロールバーの色をデフォルトとは異なる色に変更してあります。

具体的なCSSは下記です。

body::-webkit-scrollbar{
	background-color:transparent;
	border-radius:100px;
}
body::-webkit-scrollbar-thumb{
	background-color:#05A1E8;
	border-radius:100px;
}
body::-webkit-scrollbar-thumb:hover{
	background-color:#B6E0F7;
}

::-webkit-scrollbar-thumbや::-webkit-scrollbar-trackを使用することで、スクロールバーの各パーツの色を細かく設定することも可能です(詳しくは調べてみてください)。

 

ん？色が変わってない？

実はこちらの擬似要素、WebKitを使用したブラウザでしか使用できません。

ではFireFoxではどうするの？と思ったそこのあなた！

ご安心ください、ちゃんと別の方法が用意されているようです。

しかし-webkit-scrollbarよりは出来ることが限られているよう。

全ブラウザでスクロールバーを同じ見た目にカスタマイズしたい！という方は、下記のようなJavaScriptライブラリをご使用ください。

 

その他

擬似要素はブラウザによって対応状況が異なります。

ブラウザによっては、かなり細かいところまで外見を変更できるようです。

▶List of Pseudo-Elements to Style Form Controls

しかしフロントエンドエンジニアとしては、やはり全ブラウザで外見を統一したいもの。

私はこういう場合、JavaScriptライブラリを使用することをおすすめします。

JavaScriptライブラリの場合、各要素が擬似ではない実際の要素で出来ているため

CSSを反映させることで簡単に外見を変更できます。

具体的なライブラリ名は「○○（外見を変更したい要素の種類の名前）　ライブラリ」で検索するとすぐに出てきます。

しかもこの方法だと、擬似要素では変更できない箇所の外見も設定可能！

例えばプルダウンメニューの中身とかね。

ぜひいろいろ調べてみてください

終わりに

以上、様々な擬似クラス・擬似要素を紹介してきました。

皆様、初見のものはありましたでしょうか？

この記事により、あなたの普段のコーディングがさらに快適になれば幸いです。

ところで

ロジカルスタジオでは、フロントエンドエンジニアを募集しております。

好奇心と技術力にあふれるあなた！下記リンクからお待ちしているしゅこよ