スポンサーリンク

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

HTML・CSS

結耶
結耶

きらりは擬似要素と擬似クラスの違いって知ってる?

きらり
きらり

擬似要素と擬似クラスの違い?知らない。…どうしたの?急に

結耶
結耶

いや~私も知らずに使っててね。「擬似要素」と「擬似クラス」に違いがあるらしいんだよね(^^;

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

結耶
結耶

ということで今回は私の覚書も兼ねて「擬似要素」と「擬似クラス」の違いについて書いてみたいと思います。

スポンサーリンク

擬似要素とは

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

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

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

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

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

きらり
きらり

あれ?結耶beforeやafterをコロン「:」ひとつで指定してるよね。2つつけなきゃいけないならあれは間違いなの?

結耶
結耶

間違いじゃないよ。コロンについてはあとで説明するね。

擬似クラスとは

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

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

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

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

スポンサーリンク

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

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

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

きらり
きらり

なるほど!そういうことなのね!

結耶
結耶

まぁ、私は擬似要素はコロン「::」2つなんて知らなかったんだけどねw そういうことらしいよ。

最後に

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

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

スポンサーリンク

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。