制作者の活動(PR)。

アイドル・堀北真希ちゃんはうさぎの耳が似合うと思って作ったオリジナルキャラクタ
主な作品

制作者に依るイラストと動画作品の一例

擬似要素・擬似クラスについて。

擬似要素・擬似クラスについて・目次。

擬似要素・擬似クラスとは。

擬似要素とは、HTMLなどでは表記できない箇所をタイプ(要素)セレクタに見立てたものです。

一方擬似クラスは、HTMLなどでは表記できない状況をクラスセレクタに見立てたものです。

<a>要素に関する擬似クラスは幾つか解説しましたが、CSSには他にも幾つかの擬似要素と擬似クラスが定義されております。

ここでは、その中から主なものを解説しておきましょう。

first-child擬似クラス…親要素の一番目の子要素。

first-child擬似クラスは、親要素から見て一番目の子要素となった場合に限り適用されると言うものです。

例えば、CSSスタイル定義ファイルにおいて、以下のように定義されていたとします。

p {
    color: #000;
    }

p:first-child {
    color: #f00;
    }

この例では、前半の<p>タイプ(要素)セレクタでは、黒で表示するようになっておりますが、後半のfirst-child擬似要素付の<p>要素は赤で表示するようになっております。

一方、HTML文書が以下のようになっているとします。

<div class="examples">
    <p>この段落は&lt;div&gt;要素の一番目の子要素。</p>
    <p>この段落は&lt;div&gt;要素の二番目の子要素。</p>
    <p>この段落は&lt;div&gt;要素の三番目の子要素。</p>
    </div>

この場合、一番目の<p>要素だけがp:first-childセレクタが適用されて赤く表示され、その他の<p>要素はいずれも黒で表示されます。

尚、ある要素にfirst-child擬似要素を付けただけでは特に親要素を指定しませんが、特定の親要素を指定したい場合は、直下セレクタと併用します。

例えば、以下のようなプロパティ定義があったとします。

p:first-child {
    color: #000;
    }

blockquote>p:first-child {
    color: #090;
    }

この場合、前半で親要素の一番目の子要素となる<p>要素には黒文字で表示されることになりますが、後半では<blockquote>要素の一番目の子要素となる<p>要素は緑で表示されるようになります。

first-line擬似要素…第一行目のみを対象とするセレクタ。

first-line擬似要素は、第一行のみを対象としたセレクタです。

表示環境によって、第一行目の範囲は異なります。

それどころか、ウインドウのサイズを変えたり、フォントサイズを変えるだけで簡単に第一行目の範囲は変わってしまいます。

すなわち、この擬似要素をHTMLなどで明示したくても不可能である訳です。

このため、CSS側で疑似要素と言う形で対応する事にしております。

例えば、以下のようなプロパティ定義があったとします。

p {
    color: #000;
    }

p:first-line {
    color: #090;
    }

この場合、前半の定義で<p>要素は黒文字となりますが、後半で<p>要素の一行目は緑で表示されるようになります。

first-line擬似要素を用いる上での注意事項。

first-letter擬似要素…第一文字目のみを対象とするセレクタ。

first-letter擬似要素は、当該セレクタの第一文字目のみを対象とします。

但し、第一文字目が括弧などの場合は、二文字目も含まれます。

例えば、以下のようなプロパティ定義があったとします。

p {
    font-size: 1em;
    }

p:first-letter {
    font-size: 2em;
    }

この場合、前半の定義で<p>要素の文字は一文字分の大きさとなりますが、後半で<p>要素の第一文字目は二文字分の大きさで表示されるようになります。

first-letter擬似要素を用いる上での注意事項。

before擬似要素…要素の直前。

after擬似要素…要素の直後。

before擬似要素及びafter擬似要素は、要素の直前/直後を対象とした擬似要素です。

contentプロパティで、文字列を挿入することが出来ます。

例えば、以下のようなプロパティ定義があったとします。

q:before {
    content: "「";
    }

q:after {
    content: "」";
    }

この場合、<q>要素を始める前に、前半の定義により"「"が表示され、<q>要素が終わる際には後半の定義によって"」"が表示されるようになります。

contentプロパティ…出力文字列の指定。

contentプロパティは、before疑似要素及びafter擬似要素で出力させる文字列を指定するのに用います。

文字列は「"」か「'」で囲んだものを半角空白で区切って何個でも並べることが出来ます。

例えば、<blockquote>要素において、title属性で引用元が示されている場合、属性セレクタと併用することで、引用文の前に「以下、…からの引用です。」という文字を出すことが出来ます。

具体的には以下のようなスタイル定義になります。

blockquote[title]:before {
    display: block;
    font: inherit;
    color: #090;
    text-align: left;
    text-decoration: none;
    content: "以下、" attr(title) "からの引用です。";
    }

さらに、外部リソースを出力させることも出来ます。

contentプロパティの値に、「url("リソースのURI")」を指定すると、当該リソースを出力するようになります。

リソースとしては、主に画像(GIFなど)が考えられますが、画像以外のリソースも可能です。

試しに、以下のようなCSSを当てたとします。

em.special:after {
    vertical-align: top;
    content: url("Emphasized.GIF");
    }

もじらやオペラなどの擬似要素対応環境で、且つ画像表示を受入れる設定になっている場合には、specialクラスを当てた<em>要素の直後に「Emphasized.GIF」で示される画像が付く筈です。

contentプロパティを用いる上での注意事項。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com