Home » ★スタイルシートリファレンス

★スタイルシートリファレンス

:after擬似要素 …… 要素の直後に内容を挿入する
Internet Explorer8Internet Explorer9
Netscape6Netscape7Netscape8Netscape8
Opera6Opera7Opera8Opera9
Firefox1Firefox2Firefox3
広告



:after擬似要素は、要素の直後に内容を挿入する際に使用します。

挿入内容はcontentプロパティで指定しますが、例えば、文字列・引用符・カウンタ・画像・音声などを挿入することができます。

■セレクタの書式・スタイルを適用する対象

書式
要素名:after {プロパティ名:値;}
適用対象
要素の直後

■使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

h2:before {content:”★”;}
strong:before {content:”『”;}
strong:after {content:”』”;}

HTMLソース

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”sample.css”>
</head>
<body>

<h2>今日のお天気</h2>
<p>今日は<strong>晴れ</strong>です。</p>

<h2>明日のお天気</h2>
<p>明日は<strong>雨</strong>です。</p>

</body>
</html>

↓↓↓

ブラウザ上の表示

今日のお天気

今日は晴れです。

明日のお天気

明日はです。

■関連項目

要素型セレクタ(タイプセレクタ) …… 特定の要素にスタイルを適用する
全称セレクタ(ユニバーサルセレクタ) …… すべての要素にスタイルを適用する
classセレクタ(クラスセレクタ) …… 特定のclass名がつけられた要素にスタイルを適用する
idセレクタ …… 特定のid名がつけられた要素にスタイルを適用する
:link擬似クラス …… 未訪問のリンクにスタイルを適用する
:visited擬似クラス …… 訪問済のリンクにスタイルを適用する
:hover擬似クラス …… カーソルが乗っている要素にスタイルを適用する
:active擬似クラス …… クリック中の要素にスタイルを適用する
:focus擬似クラス …… フォーカスされた要素にスタイルを適用する
:lang擬似クラス …… 特定の言語を指定された要素にスタイルを適用する
:first-child擬似クラス …… 最初に現れる子要素にスタイルを適用する
:first-line擬似要素 …… 要素の最初の行にスタイルを適用する
:first-letter擬似要素 …… 要素の最初の文字にスタイルを適用する
:before擬似要素 …… 要素の直前に内容を挿入する
:after擬似要素 …… 要素の直後に内容を挿入する
属性セレクタ …… 特定の属性を持つ指定要素にスタイルを適用する
属性(値)セレクタ …… 特定の属性(値)を持つ指定要素にスタイルを適用する
属性(値候補)セレクタ …… 属性値候補と一致した場合にスタイルを適用する

E[foo^=”bar”] …… foo属性の値がbarで始まるE要素CSS3
E[foo$=”bar”] …… foo属性の値がbarで終わるE要素CSS3
E[foo*=”bar”] …… foo属性の値にbarを含むE要素CSS3
E:root …… 文書のルートとなる要素CSS3
E:nth-child(n) …… n番目の子となるE要素CSS3
E:nth-last-child(n) …… 後ろから数えてn番目の子となるE要素CSS3
E:nth-of-type(n) …… n番目のその種類の要素CSS3
E:nth-last-of-type(n) …… 後ろから数えてn番目のその種類の要素CSS3
E:last-child …… 子として最後のE要素CSS3
E:first-of-type …… 最初のその種類の要素CSS3
E:last-of-type …… 最後のその種類の要素CSS3
E:only-child …… 子として唯一となるE要素CSS3
E:only-of-type …… 子として唯一となるその種類の要素CSS3
E:empty …… 要素内容が空となるE要素CSS3
E:target …… リンクのターゲット先となるE要素CSS3
E:enabled …… 有効となっているユーザーインターフェース要素(テキストエリアなど)CSS3
E:disabled …… 無効となっているユーザーインターフェース要素(テキストエリアなど)CSS3
E:checked …… チェックされているユーザーインターフェース要素(ラジオボタン・チェックボックスなど)CSS3
E:not(s) …… sで指定するセレクタに当てはまらないE要素CSS3
E ~ F …… E要素の後ろにある同じ階層のF要素CSS3

複数のセレクタ …… 複数のセレクタに同じスタイルを適用する
子孫セレクタ …… 子孫要素にスタイルを適用する
子セレクタ …… 子要素にスタイルを適用する
隣接セレクタ …… 直後に隣接している要素にスタイルを適用する

広告



Lorem Ipsum is simply dummy text

    By signing up, you agree to our Terms and Privacy Policy. Unsubscribe anytime.