要点メモ書きです。
いわゆるセレクタと呼ばれるものですね。
<疑似要素>
[特徴・使用上の注意]
1. 要素の直前・直後に内容を挿入する。
2. 挿入内容はcontentプロパティで指定する。
3. 文字列・引用符・カウンタ・画像・音声などを挿入することができる。
4. 要素名::xxxと記載する際に半角スペースを空けない。
5. CSS3では、疑似要素はコロンを2つ付ける。
6.beforeとafter疑似要素はブラウザの対応範囲が怪しそう。
[疑似要素]
before ・・・要素の直前に適用される。
after ・・・要素の直後に適用される。
first-line ・・・ブロックレベル要素の最初の行を対象に適用される。
first-letter ・・・ブロックレベル要素の最初の文字を対象に適用される。
●::before {▲: 値;}
●::after {▲: 値;}
●::first-line {▲: 値;}
●::first-letter {▲: 値;}
[凡例]
● ・・・要素名
▲ ・・・プロパティ名
例 <a></a>タグで指定された要素の前に、「！」を挿入する。
a:before {content:"！"}
<疑似クラス>
[特徴・使用上の注意]
1. リンクにカーソルが乗ったり、クリックされた場合のスタイルを変化させる。
2. CSSでは後に記述されたものが優先して適用されるため記述順に注意
3. 要素名:xxxと記載する際に半角スペースを空けない。
4. CSS3でも疑似クラスの場合、コロンは1つだけ。
[疑似クラス]
link ・・・ 未訪問のリンクにスタイルを適用する
visited ・・・訪問済のリンクにスタイルを適用する
hover ・・・カーソルが乗っている要素にスタイルを適用する
active ・・・クリック中の要素にスタイルを適用する
focus ・・・フォーカスされた要素にスタイルを適用する
lang ・・・特定の言語を指定された要素にスタイルを適用する
first-child ・・・最初に現れる子要素にスタイルを適用する
●:link {▲: 値;}
●:visited {▲: 値;}
●:hover {▲: 値;}
●:active {▲: 値;}
●:focus {▲: 値;}
●:lang(言語コード) {▲: 値;}
●:first-child {▲: 値;}
[凡例]
● ・・・要素名
▲ ・・・プロパティ名
例 <a></a>タグで指定された要素にマウスオンした際に、背景を白にする。
a:hover {background-color:#fff;}