【CSS】擬似要素と擬似クラスの違い

2020年2月3日2021年7月17日HTML・CSS

今までいろいろCSSを使い「擬似要素」と「擬似クラス」も使ってきました。これまでは擬似要素も擬似クラスも同じようなものだと思っていました。
ですが、「擬似要素」と「擬似クラス」には違いがあるんです。

擬似要素とは

擬似要素は、要素の一部の箇所に対してスタイルを指定します。

• ::before
• ::after
• ::first-letter
• ::first-line

beforeとafterは以前使い方について書いたことがありますが、簡単位いえばbeforeは要素の前、afterは要素の後ろに存在しない要素を作り指定するものです。first-letterは最初の一文字、first-lineは最初の行(1行目)です。

このように要素の特定の箇所のスタイルを指定するのが擬似要素になります。

擬似要素の指定はコロン「::」2つで指定します。

擬似クラスとは

擬似クラスは、要素全体のスタイルを指定するものです。

• :link
• :visited
• :active
• :hover
• :nth-child

擬似クラスは他にもまだありますが、よく見かけるものは上の5つではないでしょうか。上の4つはAタグ(リンク)によく使われる擬似クラスです。nth-childは「〇番目の要素」と指定するものです。

擬似クラスの指定にはコロン「:」ひとつで指定します。

擬似要素と擬似クラスのコロン

先程疑問で出ましたが、擬似要素の指定にはコロンを「::」2つ付けることになっていますが、私も含めCSSサンプルを紹介している記事の多くはコロン「:」ひとつで指定しています。

以前CSS2までは擬似要素も擬似クラスもコロン「:」ひとつで指定されていましたが、CSS3になったときに擬似要素と擬似クラスを区別するために擬似要素に付けるコロンを「::」2つになりました。
ですが、ブラウザやブラウザのバージョンによってはコロン「::」2つに対応していないものがあります。コロン「::」2つに対応していないブラウザでも適用されるように擬似要素もコロン「:」ひとつで指定指定指定います。

最後に

今回は私が忘れないように擬似要素と擬似クラスの違いについて書いてみました。

いろいろな擬似要素、擬似クラスがあります。擬似要素、擬似クラスを使いこなせるようになればさらにたくさんのことができそうです。今回の擬似要素と擬似クラスの違いを頭の片隅において今後使っていきたいと思いますw