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

CSSの疑似要素（Pseudo-element）とは？基本構文と実例付きでわかりやすく解説

CSSの疑似要素（Pseudo-element）とは、要素の一部を指定してスタイルを適用するためのセレクターです。たとえば、テキストの最初の1文字や1行目など、通常のセレクターでは選択できない特定の部分をターゲットにできます。また、::before と ::after を使えば、要素の前後にコンテンツを挿入することも可能です。

基本構文

疑似要素は、セレクターに続けて「::」＋疑似要素名という形式で記述します。基本的な書き方は以下のとおりです。

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

サンプルコード①：カウンターを使った番号付け

ここでは、::before と ::after を使って、リスト項目の前後に自動的に番号（ローマ数字と算用数字）を表示する例を紹介します。

<!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の疑似要素（Pseudo-element）とは？基本構文と実例付きでわかりやすく解説

サンプルコード②：プレースホルダーの装飾

次に、フォームの ::placeholder 疑似要素を使って、入力欄のプレースホルダーテキストの色やフォントスタイルを変更する例を見てみましょう。ブラウザごとのベンダープレフィックスにも対応しています。

<!DOCTYPE html>
<html>
<head>
<style>
   ::-webkit-input-placeholder { /* Edge 対応 */
   color: blue;
   font-style: italic;
}
:-ms-input-placeholder { /* 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の疑似要素（Pseudo-element）とは？基本構文と実例付きでわかりやすく解説

  1. CSSの::first-letter疑似要素とは？使い方とサンプルコードを解説

    CSSの::first-letter疑似要素は、要素内のコンテンツの最初の一文字だけを選択し、そこにのみスタイルを適用できるセレクターです。雑誌や新聞でよく見かける「ドロップキャップ（先頭文字を大きく装飾する表現）」を、Webページでも手軽に実現できます。ただし注意点として、この疑似要素はインラインレベルの要素には適用できません。スタイルを反映させるには、対象となる要素がブロックレベルである必要があります。主な特徴ブロックレベル要素の最初の一文字にのみスタイルが適用されるfont-size、color、background-color、padding などのプロパティが自由に組み合わせられるイ

  2. CSSの疑似クラスと疑似要素の違いを徹底解説！コロンの数と使い分けのポイント

    CSSには「疑似クラス」と「疑似要素」という、名前がよく似た2つの機能があります。どちらもセレクターを拡張する仕組みですが、役割や書き方が異なります。本記事では、両者の違いをサンプルコード付きでわかりやすく解説します。 疑似クラス（Pseudo-Class）とは 疑似クラスは、:hover、:active、:last-childのように、セレクターの「状態」や「条件」を表すものです。マウスオーバー時のスタイル変更など、要素が特定の状態にあるときの見た目を制御できます。 疑似クラスはコロン1つ（:）で始まります。 CSS疑似クラスの基本構文は以下のとおりです。 :pseudo-class {