niwaka-web

webサイト構築関連のにわか知識集

CSS

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

投稿日:2017年6月16日 更新日:

ニワカが個人的に使いこなせていないCSSを覚えるための個人的メモです。
擬似要素と擬似クラスをまとめる前に違いを覚えておくためのメモ。

最初に書いておくとW3Cの日本語訳や色々なサイトを見ましたが、小難しい説明できちんと理解はまだ出来ていません。

擬似要素(Pseudo-elements)の概要

擬似要素は要素内の一部(特定のパーツ)に対してスタイルを適用する。

CSS3までで勧告されているのは以下の4つ。

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

他に、::selectionがCSS3で草案止まり、::backdropと言うのが実験段階であるようです。

::first-letterが、最初の一文字目のみに、::first-lineが文章の一行目のみにスタイルが適用されるように、要素内の一部に対してというのが特徴。::beforeや::afterに関しては考えると分かりづらくなるが要素内に存在しない要素を作っている感じらしい。

ちなみに擬似要素が「::」コロン二つなのはCSS2からCSS3になった際に擬似クラスと擬似要素の見分けをはっきりするために導入されたようです。
また、「::」はie8では解釈できないので使用する場合はie9以上。ie8も対応する場合は、「:」コロン一つにすること。

擬似要素の考察

W3Cの日本語訳ですと「擬似要素は文書ツリー上に、文書言語によって記された以上の抽象概念を生成する。」らしい。。

全くわかりません。。。

Web担当者Forumさんでは
「疑似要素」は、HTML(実際にはDOMツリー)内に、通常のHTMLでは指定できない「抽象的な要素」を作りだすものです。
と説明されています。さっきよりは少しわかるようなわからないような。

Webparkさんの「なぜ擬似要素という名称なのか」と言う考察と合わせると自分の中で少し理解できたきがするのでWebparkを参考に個人的にメモを残します。

擬似要素と擬似要素を使わずに同じような表示をした例。

::first-letter擬似要素を使わずに一文字目にスタイルを適用させたい場合、spanなど他の要素で囲むことでスタイルを囲む必要があります。なので、擬似要素はその要素を擬似的に要素を生成しているということなのかと思いました。

同様に::after擬似要素の例。
::afterはclearfixで良く使用されるのでそちらを例にすると、擬似要素を使用しないで再現しようとするとspanなど他の要素を入れる必要があります。なので、擬似要素は要素内の後ろに要素を擬似的に生成しているのかと思います。
上部の例はわかりやすいように形を表示しています。

擬似クラス(Pseudo-classes)の概要

擬似クラスは要素内全体に対してスタイルを適用する。

CSS3までで勧告されているの擬似クラスは数が多いので少しだけあげると

  • :nth-child()
  • :nth-of-type()
  • :link
  • :hover

などなど、他にも同じようなもの含め多数あります。

擬似クラスの考察

W3Cの日本語訳だと「擬似クラスは、文書ツリーの範囲外にある情報や、単体セレクタでは表現できないものを選択できるように導入された概念だ。」そうである。

Web担当フォーラムさんですと、
「疑似クラス」は、HTML外の要因による状態や、一般的なシンプルなセレクタでは指定できないものを指します。
とある。

私にはわかりません。

ということで、また擬似要素と同様にWebparkさんの「なぜ擬似クラスという名称なのか」と言う考察と合わせて個人的に考察。

擬似クラスと擬似クラスを使わずに同じような表示をした例。

リストの二番目を単純に赤くしたいとして、擬似クラスを使用しない場合は二番目のリストにクラスを追加しています。ということで、擬似クラスは擬似的にクラスを追加(生成)していると言うことなのかと思います。

個人的メモ

擬似要素はコロンを一つにすればIE8も対応。コロン二つはIE9以降対応。
擬似クラスは物によるが:nth-chidなどよく使うものはIE9以上。

参照ページ

記事にする際に参考にさせていただいたページ。

-CSS
-

執筆者:


  1. 通りすがりの学習者 より:

    ::first-letterが、最初の一文字目のみに、::first-letterが文章の一行目のみにスタイ・・・
    どっちも::first-letter??

    • niwaka-web より:

      >通りすがりの学習者さん
      ご指摘ありがとうございます。::first-lineが文章の一行目の間違いでしたね。。
      修正致しました。

      ありがとうございました。

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【CSS】擬似クラス「構造擬似クラス」の使い方の覚書

ニワカが個人的に使いこなせていないCSSを覚えるための個人的メモです。 擬似クラスは数が多いので、まずは「構造擬似クラス」の覚書。他の擬似クラスは別ページで作成予定。 「擬似要素と擬似クラスの違いの覚 …

Font Awesome 5の使い方【SVG with JavaScript編】

Font Awesome 5の使い方としては、SVG with JavaScript(JavaScriptとSVGによる描画)とWeb Fonts with CSS(CSSとwebフォントによる描画) …

【CSS】擬似クラス「構造擬似クラス以外」の使い方の覚書

ニワカが個人的に使いこなせていないCSSを覚えるための個人的メモです。 擬似クラスの「構造擬似クラス以外」の覚書。 「擬似クラス「構造擬似クラス」の使い方の覚書」はこちら 目次 擬似クラスの概要 リン …

【CSS】flexboxで画像とテキストを横並び、縦並びにレイアウト【メモ】

レスポンシブサイトでよく見かける画像とテキストを左右交互に、スマホで上下に配置してくレイアウトをflexboxを利用して実装する方法の個人的メモ。 ようやく最近使用するようになったflexboxの学習 …

【CSS】擬似要素の使い方の覚書

ニワカが個人的に使いこなせていないCSSを覚えるための個人的メモです。 比較的利用している「擬似要素」の覚書。 「擬似要素と擬似クラスの違いの覚書」と多少内容重複するかと思います。 目次 擬似要素の概 …