疑似要素と疑似クラス

疑似要素とは

疑似要素とは、要素内の特定の文字や行に対してスタイルを指定したりするものです。

疑似要素は、コロンコロンで始まるキーワードです。

よく使われる疑似要素

• :before{}
• :after{}
• :first-letter{}

疑似クラスとは

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

疑似クラスは、コロンで始まるキーワードです。

疑似クラスは、特定の状態にある要素を選択するセレクターです。
たとえば、それらはそのタイプの最初の要素であるか、マウスポインターによってホバーされています。それらは、ドキュメントの一部にクラスを適用したかのように振る舞う傾向があり、マークアップの余分なクラスを削減し、より柔軟で保守可能なコードを提供するのに役立ちます。

ホバーは「対象物にマウスカーソルを重ねると、自動で何らかの処理が行われること」を指す単語であり、「マウスオーバー」とほぼ同じ意味の使われ方をしています。

よく使われる疑似クラス

最も多く使われているであろう、おなじみのaタグに使うやつが疑似クラスです。

• a:link{}
• a:hover{}
• a:visited{}

意外と知らない！疑似要素と疑似クラスでできること | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

CSSを覚えたてのときは得体の知れないものを見るような目で使っていた疑似要素と疑似クラス。できることをぐんと広げてくれます。

株式会社LIG(リグ)｜DX支援・システム開発・Web制作

擬似クラスと擬似要素 - ウェブ開発を学ぶ | MDN

次に見ていくセレクターの集合は、擬似クラスと擬似要素と呼ばれるものです。これらのセレクターは多数あり、かなり特有の用途に使われることが多いです。これらがどのよ…

MDN Web Docs