CSSの::afterと:after コロンの数の違いは？ 疑似要素とクラスとは | 初代編集長ブログ―安田英久
今日は、Webの現場寄りに、CSSの話を。セレクタで「:after」と「::after」がありますが、どちらが正しいのでしょうか。そもそも、「疑似クラス」や「疑似要素」とはどういうものなのでしょうか。 CSSセレクタにはいろいろありますが、「::after」「::before」という書き方と、「:after」「:before」という書き方があります。 昔からCSSに触っている人は、「え？ コロンが2つって何？」となると思います。使い慣れた「:after」と今の「::after」は何が違うのでしょうか。 疑似クラスは「:」、疑似要素は「::」CSS3では、次のようにされています。 「疑似クラス」は「:hover」のようにコロン1つで書く「疑似要素」は「::after」のようにコロン2つで書く昔はどちらもコロン1つで書いていたのですが、CSS3でこの2つが区別できるように分けられました。古い人
CSSの疑似要素と疑似クラスの違いを明確に ｜https://wp.yat-net.com/name
ちょっとわかりづらい疑似要素と疑似クラスの違いについてまとめました。 疑似要素、疑似クラスの記述は、css2までは:beforeのようにコロンが一つだったのですが、css3になってから、疑似要素は::beforeというようにコロンを２つつけるようになり、疑似要素と疑似クラスを識別するようになりました。（疑似クラスは以前と同じく:は一つで記述します。） 疑似要素と疑似クラスはぱっと見て違いがわかりづらいですよね。分けるとこのようになります。 疑似要素 文章の１文字目、１行目など、要素の一部に対して影響を与える事ができるのが疑似要素になります。前述の通り：（コロン）は２つつけます。 ::before ::after ::first-letter ::first-line ::selection 例えば とすれば、指定した要素の最初の文字だけ、色が変わるので、要素の一部に対して影響をあたえるとい
擬似要素と擬似クラスの違いやダブルコロンとシングルコロンの話
私のように趣味でWebサイト作成をしていると基礎が抜け落ちていたりするので復習を兼ねて擬似要素と擬似クラスの違いについて考えてみました。 擬似クラス（Pseudo-classes） 擬似クラスには次のようなものがあります。何気なく使っていますが、擬似クラスという名称を知らない方も多いのではないでしょうか。 :link :visited :hover :active で、擬似クラスはCSS3で大幅に追加されました。 E:nth-child(n) ･･･ n番目の子要素に適用 E:nth-of-type(n) ･･･ n番目にあるE要素に適用 E:first-of-type ･･･ 兄弟関係にあるE要素で最初のものに適用 この他にもまだまだあります。これらの詳しい内容については「保存版！CSS3セレクタの説明書｜Webpark」をご参考に。 なぜ擬似クラスという名称なのか 例えば、以下のような
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
株式会社プレコフーズ｜生鮮三品（食肉・野菜・魚）業務用食品卸
110% Magazin - Eskapismus