~解説用吹き出し編~意外と知らない?HTMLとCSSのコメントアウト【CSS】擬似要素と擬似クラスの違い2020年2月3日TwitterFacebookB!HatenaPocketLINELINERSSCopy結耶きらりは擬似要素と擬似クラスの違いって知ってる?きらり擬似要素と擬似クラスの違い?知らない。...どうしたの?急に結耶いや~私も知らずに使っててね。「擬似要素」と「擬似クラス」に違いがあるらしいんだよね(^^;今までいろいろCSSを使い「擬似要素」と「擬似クラス」も使ってきました。これまでは擬似要素も擬似クラスも同じようなものだと思っていました。「擬似要素」と「擬似クラス」には違いがあるんです。結耶ということで今回は私の覚書も兼ねて「擬似要素」と「擬似クラス」の違いについて書いてみたいと思います。最後にスポンサーリンク擬似要素とは擬似要素は、要素の一部の箇所に対してスタイルを指定します。::before::after::first-letter::first-linebeforeとafterは以前使い方について書いたことがありますが、簡単位いえばbeforeは要素の前、afterは要素の後ろに存在しない要素を作り指定するものです。first-letterは最初の一文字、first-lineは最初の行(1行目)です。このように要素の特定の箇所のスタイルを指定するのが擬似要素になります。擬似要素の指定はコロン「::」2つで指定します。あれ?結耶beforeやafterをコロン「:」ひとつで指定してるよね。コロンについてはあとで説明するね。擬似クラスとは擬似クラスは、要素全体のスタイルを指定するものです。:link:visited:active:hover:nth-child擬似クラスは他にもまだありますが、よく見かけるものは上の5つではないでしょうか。上の4つはAタグ(リンク)によく使われる擬似クラスです。nth-childは「〇番目の要素」と指定するものです。擬似クラスの指定にはコロン「:」ひとつで指定します。スポンサーリンク擬似要素と擬似クラスのコロン先程疑問で出ましたが、擬似要素の指定にはコロンを「::」2つ付けることになっていますが、私も含めCSSサンプルを紹介している記事の多くはコロン「:」ひとつで指定しています。以前CSS2までは擬似要素も擬似クラスもコロン「:」ひとつで指定されていましたが、CSS3になったときに擬似要素と擬似クラスを区別するために擬似要素に付けるコロンを「::」2つになりました。ブラウザやブラウザのバージョンによってはコロン「::」2つに対応していないものがあります。コロン「::」2つに対応していないブラウザでも適用されるように擬似要素もコロン「:」ひとつで指定指定指定います。最後に今回は私が忘れないように擬似要素と擬似クラスの違いについて書いてみました。いろいろな擬似要素、擬似クラスがあります。擬似要素、擬似クラスを使いこなせるようになればさらにたくさんのことができそうです。RinkerAmazon楽天市場Yahooショッピングスポンサーリンク応援よろしくお願いします。結耶(ゆうや)2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!多発性硬化症(MS)という難病と闘っています。...【つぶやき】わかったときには手遅れだった!以前から色んなサイトでみて気になっていた広告があります。...【WordPress】定期的に自動でバックアップをしてくれるプラグイン前回の記事でWordPressのバックアップについて書きました。記事を書く上で写真などの画像は書かせないものです。コメントをキャンセルメールアドレスが公開されることはありません。メールアドレスは任意です。メールアドレスを入力すると返信があったことをお知らせする通知がメールで届きます。コメント名前メールアドレスウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。プロフィールこんにちは。2017年9月からブログとアフィリエイトをはじめました。多発性硬化症という難病と闘いながら、ブログやアフィリエイトの勉強をしています。初心者ですが、ブログ(WordPress)やアフィリエイトについて書いています。★応援お願いします★こちらもよろしくお願いします。...【WordPress】カテゴリーウィジェットのデザインをカスタマイズしてみた!WordPressのカテゴリーウィジェットってシンプルですよね。8メールで購読メールアドレスを記入して購読すれば、更新をメールで受信できます。yuu_ms715★フォローお願いします。ブログとTwitterを連携して更新情報をツイートしています。よかったらフォローお願いします。