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

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

あすにゃんの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の名を持つ要素に対し、外見を設定できます。

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

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

:valid

:valid は CSS の擬似クラスで、内容物の検証に成功した <input> 要素 やその他の <form> 要素を表します。
出典　:valid – CSS: カスケーディングスタイルシート | MDN

:validはフォーム系タグで、タグの期待する内容が入力されているときの外見を変更できます。
入力状態に応じて表示を変えたいときに便利そうです。

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

: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

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

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

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

疑似要素

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

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

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

::selection

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

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

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

::-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

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

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

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

ん？色が変わってない？

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

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

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

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

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

• SimpleBar
• Perfect-Scrollbar

その他

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

例えばWebKitを使用したブラウザに絞ると、かなり細かいところまで外見を変更できるようです。

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

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

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

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

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

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

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

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

終わりに

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

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

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

ところで

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

好奇心と技術力にあふれるあなた！下記リンクからお待ちしております🥰🥰🥰