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

CSSの疑似要素とは何ですか

CSS疑似要素は、基本的に、最初の文字、最初の行など、要素の特定の部分のセレクターです。：afterおよび：before疑似要素を使用して、要素の前後にそれぞれ挿入できます。

構文

以下は、要素でCSS疑似要素を使用するための構文です-

Selector::pseudo-element {
   css-property: /*value*/;
}

例

CSS疑似要素の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
ol, ul {
   list-style: none;
   counter-reset: demo_var2;
}
ul {
   counter-reset: demo_var1;
}
ol > li::before {
   counter-increment: demo_var2;
   content: counter(demo_var2, lower-roman) ") ";
}
li::after {
   counter-increment: demo_var1;
   content: " " counter(demo_var1) ". ";
}
</style>
</head>
<body>
<ul>
<li>Demo Line</li>
<ol>
<li>demo line</li>
<li>demo line</li>
</ol>
<li>Demo Line</li>
<ol>
<li>demo line</li>
<li>demo line</li>
</ol>
<li>Demo Line</li>
</ul>
</body>
</html>

出力

これにより、次の出力が生成されます-

CSSの疑似要素とは何ですか

例

CSS疑似要素の別の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
   ::-webkit-input-placeholder { /*Support for Edge */
   color: blue;
   font-style: italic;
}
:-ms-input-placeholder { /*Support for Internet Explorer */
   color: blue;
   font-style: italic;
}
::placeholder {
   color: blue;
   font-style: italic;
}
</style>
</head>
<body>
<h2> Sample Form </h2>
<textarea id="desc" name="desc" rows="5" cols="33" placeholder="Type here"></textarea>
<br />
<input type="text" name="author" placeholder="author name">
</body>
</html>

出力

これにより、次の出力が生成されます-

CSSの疑似要素とは何ですか


  1. CSSの::first-letter疑似要素

    このCSS疑似要素は、要素のコンテンツの最初の文字を選択します。ただし、要素がインラインレベルの場合、これは機能しません。 例 CSS::first-letter疑似要素-の例を見てみましょう <!DOCTYPE html> <html> <head> <style> div{    background-color: #32485d;    border: 5px solid black;    color: #959799; } p::first-letter {   &

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

    疑似クラス 疑似クラスは、：hover、：active、：last-childなどのセレクターの状態を表します。これらは単一のコロン（:)で始まります。 CSS疑似クラスの構文は次のとおりです- :pseudo-class{ attribute: /*value*/ } 疑似要素 同様に、疑似要素は、::after、::before、::first-lineなどの仮想要素を選択するために使用されます。 これらは二重コロン（::）で始まります。 CSS疑似要素の構文は次のとおりです- ::pseudo-element{ attribute: /*value*/ } 例 次