擬似要素・擬似スタイルとは

擬似要素

要素名や属性などでは分類できない状態に対してスタイルを設定したいときがあります。擬似要素を指定することによって、マウスが乗ったときやクリックしたときなどの表示変える事が出来ます。
擬似要素には、次の種類があります。要素に続けて記述します。

:link
まだ見て(キャッシュされて)いないページへのリンク
:visited
既に見た(キャッシュされた)ページへのリンク)
:hover
マウスが要素に乗ったとき
:active
リンク部分をクリックなどで選択した瞬間
:focus
対象がクリックされた時
:lang
(言語コード)スタイルを適用させる言語)

:hover をリンクに設定する場合は、a:link、avisited、a:hover、a:active の順に記述する必要があります。

擬似スタイル

擬似スタイルは、HTLM のツリー構造の要素では指定できない部分に対してスタイルを設定できます。例えば、ブロックレベル要素の最初の文字や最初の 1 行などが、指定できます。
擬似スタイルには、次の種類があります。要素に続けて記述します。

:first-line
ブロックレベル要素の表示上の最初の 1 行。但し、:first-letter の指定と一緒に使った場合、最初の 1 文字は、:first-letter の指定が優先されます。
:first-letter
ブロックレベル要素の最初の 1 文字。
:before
要素の直前に生成し追加される内容。content プロパティで、追加される内容を記述。IE では、未対応です。但し、:first-letter の指定と一緒に使った場合は、:first-letter の後に生成されます。
:after
要素の直後に生成し追加される内容。content プロパティで、追加される内容を記述。

CSS 擬似要素・擬似スタイルの例

絶擬似要素・擬似スタイルの例を示します。
メニューが、擬似要素の例です。マウスを乗せたりクリックしたりすると、色が変わるように擬似要素を設定しています。次の段落が、擬似スタイルです。段落の最初の文字の色と大きさ、最初の 1 行の色を擬似スタイルで変えています。次の段落では、段落の最初と最後に、擬似スタイルで追加文字を表示しています。但し、この擬似スタイルは、インターネットエクスプローラ IE では、対応していません。
サンプルを、クリックして、ご確認ください。
なお、ドキュメントタイプ( Document Type Definition 以下 DTD )の指定をしてありませんので、Web ブラウザによって、表示の位置などが変わります。全ての Web ブラウザで表示位置を合わせたい場合、DTD を指定して、DTD にあわせた CSS の指定をしてください。
サンプル: CSS 擬似要素・擬似スタイルのサンプル
ソースコードは次の通りです。

CSS 擬似要素・擬似スタイルの HTLM ソースコード

<html>
<head>
<link rel="stylesheet" href="css_quasi.css" type="text/css">
<title>CSS 擬似クラス・擬似要素</title>
</head>
<body>

<h1>擬似クラス・擬似要素</h1>

<h2>擬似クラス</h2>
<p>
擬似クラスの例です。メニューにマウスを乗せたり、クリックしたりしてみてください。
</p>

<h3><a href="#">メニュー1</a></h3>
<h3><a href="#">メニュー2</a></h3>
<h3><a href="#">メニュー3</a></h3>

<h2>擬似要素</h2>
<div>
このブロックは、擬似要素をチェックするために書かれています。擬似クラスの中には、ブラウザによって未対応の要素もあります。
</div>
<pre>
このブロックで設定されている擬似クラスは、
インターネットエクスプローラ IE では、対応していません。
</pre>

</body>
</html>
 

css_quasi.css のソースコード

/* 擬似クラス・擬似要素 */

/* 擬似クラス */
h3 a:hover{
    background-color:#ffffd8;    /* マウスオンの背景色 */
    }
h3 a:active{
    background-color:#ffcc77;    /* マウスクリックの背景色 */
    }
/* 擬似要素 */
div:first-line    {
    color:red;
    }
div:first-letter    {
    font-size:300%;
    color:green;
    float:left
    }
/* 次の擬似要素は、IE では対応していません */
pre:before    {
    content:"要チェック!!";
    font-size:60%;
    color:red;
    }
pre:after    {
    content:"よろしいですか?";
    font-size:60%;
    color:gray;
    }


/* メニューの装飾 */
h3    {
    padding:0px;
    margin:0px;
    }
h3 a{
    display:block;
    width:121px;
    background-color:#eeffcc;
    border:2px solid;
    border-color:#efffdd #00aa00 #00aa00 #efffdd;
    text-align:center;
    text-decoration:none;
    font-size:14px;
    color:#115533;
    font-weight:900;
    }

/* ページサイズ */
div    {
    width:250px;
    }

css_quasi.css の

/* メニューの装飾 */

から下の記述は、擬似要素・擬似スタイルとは直接関係ありませんので、興味のある方はよく読んで理解してみましょう。

PR amazon

author

サイト管理人:パワーデジット
管理人への連絡フォーム

ロリポップ! レンタルサーバーは、高機能なのに236円/月~
月額125円からの「さくらのレンタルサーバ
レンタルサーバー

スポンサード リンク

このページは 

トップページ > CSS > 擬似要素・擬似スタイル