2017/2/9更新

CSSにおける疑似要素とは？

今回は「疑似要素」とは何かについてご紹介します。

疑似要素とは

疑似要素には、::before、::afterなどがあり、要素内の特定の文字や行に対してスタイルを指定したり、文字や画像を追加するのに使われます。

疑似クラスとの違いは、要素全体の特定の状態を指定するだけでなく、要素の特定の部分のスタイルを指定することができます。例えば「p:first-letter{}」と記述すると、p要素の最初の文字だけにスタイルが指定されます。

CSS3からは、疑似要素を記述する場合は「::before」のように、コロン（:）を2つ使用します。これは疑似クラスと疑似要素の区別を明確にするためです。

<div id="sample">
<p class=new>SAMPLE</p>
</div>

<p class=new>SAMPLE</p>

</div>

p.new::after{
content: " NEW!";
color: red;
font-size: 70%;
}

p.new::after{

content: " NEW!";

color: red;

font-size: 70%;

}

上記のように記述することで、「SAMPLE」というテキストのあとに「NEW!」という赤い文字を追加することができます。メニューバーなど全く同じ記述のHTMLが複数ある場合に、CSSに記述するだけで全てのHTMLを修正することが可能になるので、わざわざ１つ１つ書き換える必要がなくなります。

::after・・・要素の直後にスタイルを適用
::before・・・要素の直前にスタイルを適用
::first-letter・・・要素の最初の文字にスタイルを適用
::first-line・・・要素の最初の行にスタイルを適用

疑似要素も、疑似クラス同様とても便利なセレクタです。特に「::before」や「::after」が使いこなせるようになると、いろいろなデザインや表現ができ、画像を使わずにCSSのみでWebサイトを作れるようにもなります。

ただ、「::before」や「::after」は、IE8以前でサポートされていないため、使用する際には覚えておきましょう。

CSS