07日CSSの擬似要素と擬似クラスの違いを明確にカテゴリ:CSS3タグ:擬似要素擬似クラス1117270ちょっとわかりづらい擬似要素と擬似クラスの違いについてまとめました。擬似要素、擬似クラスの記述は、css2までは:beforeのようにコロンが一つだったのですが、css3になってから、擬似要素は::beforeというようにコロンを2つつけるようになり、擬似要素と擬似クラスを識別するようになりました。(擬似クラスは以前と同じく:は一つで記述します。)擬似要素と擬似クラスはぱっと見て違いがわかりづらいですよね。分けるとこのようになります。文章の1文字目、1行目など、要素の一部に対して影響を与える事ができるのが擬似要素になります。前述の通り:(コロン)は2つつけます。::before::after::first-letter::first-line::selection例えばとすれば、指定した要素の最初の文字だけ、色が変わるので、要素の一部に対して影響をあたえるということになります。擬似クラス一方、擬似クラスは指定したもの全体に影響を与えるもので、文書構造の範囲外にある情報や単体セレクタで表現できないものを選択するために導入された概念です。(マウスホバー時とかは文書構造の範囲外ですし、単体セレクタだけでは取れないですよね。):link:visited:active:hover:focus:lang:target:root:nth-child:nth-last-child:nth-of-type:nth-last-of-type:first-child:last-child:first-of-type:last-of-type:only-child:only-of-type:empty:not:enabled:checkedこちらも例を用いるとこのように、指定した要素全てに対して影響をあたえるようになります。指定方法スタイルを定義する際は下記のようになります。アップデートを受けられるようになるため、実質IE8の対応を考える必要が無くなります。サポートポリシー変更の重要なお知らせをご参照ください。使い方このブログではヘッダーメニューの”|”で活用しています。display:inline;}最後に最近の話ではないですが、擬似要素、擬似クラスが登場してから、コーディングで出来ることの幅が凄く広がった!という印象があります。登場してからかなり経つのに、我ながら今更感のある記事でもあるんですが、こうやってまとめておくことでしっかり頭にも入るので、やっぱり書きたいことを書くのが良いですね。今回の記事を書くにあたり、下記サイトを参考にさせていただきました。ZERO擬似クラスと擬似要素を複数指定する方法お役に立てたらお願いします🙇AdShare1117270RelatedHTML5、CSS3に関する情報まとめ。コメントをキャンセルメールアドレスが公開されることはありません。はじめましたRish-DesignフリーランスのWebデザイナーとして独立しました。お仕事お待ちしています。枚方で電源・Wifi完備の仕事や勉強ができるコワーキングスペースSHINCRU。写真素材を無料(フリー)で配布しているストックフォトサービスです。GoodsSUZURIにてオリジナルグッズ販売しています。写真AuthorWebデザイナーのYATです。Webデザイン、コーディング、プログラミング、プランニング、ディレクションと幅広く行なっています。