HTML CSS 擬似要素 と 擬似クラス を併用する【::before ::after :hover 】


HTMLやCSSでよく見かける 擬似要素(例. ::before ::after) と 擬似クラス(例. :hover ) が併用可能か調べてみました。
 

結論

:擬似クラス::擬似要素は動作する

  • 例. :hover::afterは動作する

 

::擬似要素:擬似クラスは動作しない

  • 例. ::after:hoverは動作しない

 

もくじ

以下は本記事のもくじです。

  1. 1. おさらい 擬似要素と擬似クラス
  2. 2. 擬似要素:擬似クラスができるかどうか
  3. 3. まとめ

 
それでは説明していきます。
 
 

スポンサーリンク



 
 

1. おさらい 擬似要素と擬似クラス

擬似要素とは

擬似要素は要素内の特定の文字や行に対してスタイルを指定して、文字や画像を追加することができます。

よく使う擬似要素に、beforeとafterがあります。
::before{}
::after{}
 

例. divの前後に::beforeや::afterを入れてみる。

divに擬似要素beforeとafterを入れる

divに擬似要素beforeとafterを入れる

 
■上記のHTML文

 

■上記のCSS

 
 

擬似クラスとは

疑似クラスとは、要素が特定の状態にある場合にスタイルを指定するものです。
 

よく使う擬似クラス
:hover{}
 

a:hover{}
を指定してリンク先にカーソルを合わさった状態の時に色を変えるとかはよくある例です。

 
 

擬似要素と擬似クラスは併用できるのか

beforeやafterなどの擬似要素に対して擬似クラスhoverを適用したい場面に遭遇したので試してみたところ、

擬似要素:擬似クラス
例. div::after:hover{}
のように指定してもafter要素に対してはhoverで指定した内容が動作しませんでした。

 
一方、
 

擬似クラス::擬似要素
例. div:hover::after
のように指定するとafter要素に対してhoverで指定した内容が動作しました。

 
動画でお見せすると以下のようになります。


 
WebブラウザはSafari9.1で検証。
 
 

スポンサーリンク



 
 

3. まとめ

beforeやafterなどの擬似要素に対して擬似クラスhoverを指定したい場合は
擬似クラス:擬似要素(例 :hover::after)
にすれば動作した。

::擬似要素:擬似クラス(例 ::after:hover)
にすれば動作しなかった。

 

参考サイト
擬似クラスと擬似要素

 

今回は以上になります。最後までご覧いただきありがとうございました。

こちらの記事もおすすめです


mail無料メルマガ

メルマガを受け取る女性

読者限定の情報やイベント情報を先行配信

読者限定のお得なモニター価格情報やHP作成・運用や独立・副業を考えている人向けにイベントの先行配信しています!登録・解除は自由です!ぜひご登録ください!