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

CSS疑似要素

最初の文字、最初の行、またはその前後に挿入するなど、要素の特定の部分のスタイルを設定できます。これらの目的のために、CSS疑似要素が使用されます。

注 − CSS疑似クラスを疑似要素から分離するために、CSS3では、疑似要素はダブルコロン表記を使用します。

構文

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

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

以下は、利用可能なすべてのCSS疑似要素です-

Sr.No 疑似要素と説明
1 後
言及された各要素のコンテンツの後に何かを挿入します
2 前
言及された各要素のコンテンツの前に何かを挿入します
3 最初の文字
言及された各要素の最初の文字を選択します
4 ファーストライン
言及された各要素の最初の行を選択します
5 プレースホルダー
フォーム要素のプレースホルダーテキストを選択します
6 選択
ユーザーが選択した要素の部分を選択します

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

例

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
   background-color: black;
}
p::first-line {
   background-color: lightgreen;
   color: white;
}
span {
   font-size: 2em;
   color: #DC3545;
}
</style>
</head>
<body>
<h2>Computer Networks</h2>
<p><span>A</span> system of interconnected computers and computerized peripherals such as printers is called computer network. </p>
</body>
</html>

出力

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

CSS疑似要素

例

<!DOCTYPE html>
<html>
<head>
<style>
div:nth-of-type(1) p:nth-child(2)::after {
   content: " LEGEND!";
   background: orange;
   padding: 5px;
}
div:nth-of-type(2) p:nth-child(2)::before {
   content: "Book:";
   background-color: lightblue;
   font-weight: bold;
   padding: 5px;
}
</style>
</head>
<body>
<div>
<p>Cricketer</p>
<p>Sachin Tendulkar:</p>
</div>
<hr>
<div>
<p><q>Chase your Dreams</q></p>
<p><q>Playing It My Way</q></p>
</div>
</body>
</html>

出力

CSS疑似要素


  1. CSSで兄弟要素を選択する

    最初のセレクターの直後にある要素を照合する場合は、隣接する兄弟セレクター（+）を使用します。ここでは、両方のセレクターが同じ親要素の子です。 CSS隣接兄弟コンビネータの構文は次のとおりです- Selector + Selector{    attribute: /*value*/ } 2番目に選択した要素の位置に関係なく、同じ親の兄弟を選択する場合は、CSSの一般的な兄弟コンビネータを使用します。 CSSの一般的な兄弟コンビネータの構文は次のとおりです- Selector ~ Selector{    attribute: /*value*/ }

  2. CSSアニメーションで隠された要素を明らかにする

    CSSアニメーションを使用すると、非表示の要素を表示できます。 次の例は、CSSアニメーションを使用して要素を表示する方法を示しています。 例 <!DOCTYPE html> <html> <style> .item {    position: relative;    perspective: 1000px; } .demo, .hidden-one {    background: lightgreen;    box-shadow: 0 5px 12px rgba(0,