CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの疑似クラスと疑似要素の違い

疑似クラス

疑似クラスは、：hover、：active、：last-childなどのセレクターの状態を表します。これらは単一のコロン（:)で始まります。

CSS疑似クラスの構文は次のとおりです-

:pseudo-class{
   attribute: /*value*/
}

疑似要素

同様に、疑似要素は、::after、::before、::first-lineなどの仮想要素を選択するために使用されます。

これらは二重コロン（::）で始まります。

CSS疑似要素の構文は次のとおりです-

::pseudo-element{
   attribute: /*value*/
}

例

次の例は、CSSの疑似クラスと疑似要素のプロパティを示しています。

<!DOCTYPE html>
<html>
<head>
<style>
a:hover{
   padding: 3%;
   font-size:1.4em;
   color: tomato;
   background: bisque;
}
</style>
</head>
<body>
<p>You're somebody else</p>
<a href=#>Dummy link 1</a>
<a href=#>Dummy link 2</a>
</body>
</html>

出力

これにより、次の結果が生成されます-

CSSの疑似クラスと疑似要素の違い

例

<!DOCTYPE html>
<html>
<head>
<style>
p::after {
   content: " BOOM!";
   background: hotpink;
}
p:last-child {
   font-size: 1.4em;
   color: red;
}
</style>
</head>
<body>
<p>Anymore Snare?</p>
<p>Donec in semper diam. Morbi sollicitudin sed eros nec elementum. Praesent eget nisl vitaeneque consectetur tincidunt. Ut molestie vulputate sem, nec convallis odio molestie nec.</p>
<p>Hit</p>
<p>Pop</p>
</body>
</html>

出力

これにより、次の結果が生成されます-

CSSの疑似クラスと疑似要素の違い


  1. CSSボーダーとアウトラインの違いを理解する

    CSS borderプロパティは、要素のborderプロパティを定義するために使用されます。これは、border-width、border-style、border-colorの省略形です。個々の辺の境界線のスタイルを設定したり、境界線の半径を指定したりできます。 一方、CSSアウトラインはスペースをとらず、設定されている場合は境界線の周りに表示されます。オフセットをサポートします。さらに、個々の側面に輪郭を付けるかどうかを指定することはできません。 デフォルトでは、境界線とアウトラインの両方は表示されません。 構文 CSSのborderおよびoutlineプロパティの構文は次のとおりで

  2. CSS表示と可視性の違い

    CSSVisibilityプロパティとCSSDisplayプロパティをそれぞれ使用して、HTMLドキュメント内の要素を非表示または削除できます。ユーザーには、2つのプロパティのいずれを使用しても違いはないように見えるかもしれませんが、違いはあります。 CSSディスプレイ − noneはドキュメント上の要素をレンダリングしないため、スペースを割り当てません。 CSSの可視性 − hiddenはドキュメント上の要素をレンダリングし、スペースも割り当てられますが、ユーザーには表示されません。 例 CSS表示の例を見てみましょうなし- <!DOCTYPE html> <html