fotodeo

疑似要素とは？

記述方法は：：ではじまり、beforやafterなどを使ってHTMLに影響を与えずにコンテンツの内容やスタイルを変更する事が出来ます。

疑似要素を使わない

例えば疑似要素を使わずに先頭文字だけ飾ると下記のようになります。

-css-
<style type="text/css">
   h3 span{font-size:1.5em; color:#f00;}
</style>

-html-
<h3><span>先<span>頭文字だけ色が変わるテスト</h3>

-実行結果-

この方法でも間違いではないですが、繰り返しこの操作が必要となった場合などで面倒です。

疑似要素を使う

<style type="text/css">
   h3::first-letter{font-size:larger; color:#f00;}
</style>

<h3>先頭文字だけ色が変わるテスト</h3>

どうでしょう？劇的に楽になる想像が出来ませんか？first-letterは要素の最初の文字に対してスタイルを掛けます。
他に似たものでfirst-lineなんてのもあります。こちらは1行目のみスタイルが適応になります。

疑似要素のメリット

疑似要素はhtmlに変更を加えることなく、要素の内容に変化を付ける事が出来ます。

良く使う疑似要素

かなりの頻度で使う疑似要素がbeforeとafterです。これはどんな事をしてくれるのでしょうか

• before要素の前に疑似的に新しい要素を作る。
• ・after要素の後ろに疑似的に新しい要素を作る。

どうゆう事か使用している例を挙げようと思います。

<style type="text/css">
   p::before{content: '・例:'}
    p::after{content:'のテスト。'}    
</style>

<p>first-letter</p>
<p>befor</p>
<p>after</p>

-実行結果-

first-letter

befor

after

実行するとp要素に対してbeforeとafterが付きます。例では簡単な使い方を上げましたが、使い方によってはfloatの掛かった要素のafterにcrear:bothを付けるとか、
要素の背景をちょっと飾りたい（例えば吹き出しつけたい）なんて思った時にbeforとafter使って装飾したりします。私のメニューの見出しやボタン関係にもすごく頻繁に使用しています。

では疑似クラスとは何か

擬似クラスとは指定の要素が特定の条件である場合にスタイルが発動するセレクタになります。
なんだかややこしいですね＾＾；
例を挙げるとすぐわかると思います。

• a:link（未訪問のリンク要素の指定）
• a:visited（訪問済のリンク要素の指定）
• a:hover（要素にマウスがホバーした際の指定）
• a:active（要素がアクティブ状態になった際の指定）

これは分かりやすいですね。条件を満たすとクラスが発動します。
他にnth-child(n)（親要素内のn番目の要素の指定）などあります。こちらに関しては一度記事にしてますのでそちらもどうぞ。
（記事はこちら）
他の疑似クラスとしてnth-of-type(n)、not(B)など疑似クラスについては本当にたくさんあるので色々調べて活用してみてください。

まとめ

疑似要素のbefore,afterについては本当に良く使います。楽になるのと、無いとできないことまで幅広く使う場面があります。そしてこれらの疑似要素、疑似クラスを扱えるようになるとコーディングの幅が凄く広がりますので身に着ける事をお勧めします。