CSSの疑似クラスと疑似要素

CSS


リンクの設定とclearfix以外ではあまり使うことが少ないと思われますが覚えておくと意外と便利です。


疑似クラス

  • :link・・・・・・ 未訪問リンクのスタイル
  • :visited ・・・・ 訪問済みリンクのスタイル
  • :hover ・・・・・ カーソルが重なった時のスタイル
  • :active・・・・・ アクティブ時スタイル
  • :focus ・・・・・ フォーカス時のスタイル
  • :lang()・・・・・ 指定された言語のスタイル
  • :first-child ・・ 最初の子要素のスタイル
  • :target・・・・・ ターゲットとなる要素のスタイル


疑似要素

  • :first-letter・・ ブロック要素の一文字目
  • :first-line・・・ ブロック要素の一行目の文字列
  • :before・・・・・ 要素の直前に生成内容を挿入
  • :after ・・・・・ 要素の直後に生成内容を挿入

疑似クラス　:link、:visited、:hover、:active

これはお馴染みですね、リンクの設定でよく使います。
CSSの指定順も":link"→":visited"→":hover"→":active"の順に指定しないとうまく動きません。


指定方法

a[href]:link { color: #ff0000; }
a:link { color: #ff0000; }
:link { color: #ff0000; }

疑似クラス　:focus

inputやtextareaなどアクティブなテキストエリアなどにマッチします。
テキストフィールドをクリックしアクティブになったときに背景色を変えるなどで使えますね。


指定方法

input:focus { background-color: #ff0000; }

疑似クラス　:lang()

lang属性を疑似クラスとしてセレクタに用いる事が出来ます。


指定方法

:lang(ja) { font-weight: bold; }
p:lang(en) { font-style: italic; }
p[lang="ja"] { font-style: italic; }

一つ目は日本語のあるあらゆる要素に対してマッチします。
二つ目のスタイルは英文であるp要素にだけマッチします。
三つ目は属性セレクタを用いても一緒です。


疑似クラス　:first-child

親要素の中の最初の子要素にだけマッチします。


指定方法

div#content p:first-child { color:#ff0000; }

div#content内にある最初の子要素であるp要素にだけマッチします。


疑似クラス　:target

タブメニューの制作などでよく使われています。
ですが、"Firefox"、"Safari"、"Chrome"は対応しているのですが、"IE" や "Opera" は未対応・・うーん、残念。 ＞＜


指定方法

#Box1:target { z-index: 2; }

使い方は仮にアンカータグに"#Box1"を指定していた際にクリックすると#Box1がマッチするという感じです。


疑似要素　:first-letter、:first-line

":first-letter"はブロック要素の1文字目、":first-line"はブロック要素の1行目にマッチします。
:first-letterの場合、一文字目に引用符などの区切り文字が来た場合は、二文字目も含まれてしまいます。


指定方法

p:first-letter { font-weight: bold; }
p:first-line { font-weight: bold; }

疑似要素　:before、:after

要素の直前、直後に、生成内容を挿入することができます。
プロパティ"display"の指定可能な値に制約を受けます。


ブロックレベル要素
":before"、":after"の"display"に指定可能な値は、"none"、"inline"、"block"、 "marker"。その他の値は"block"と同じ。

インラインレベル要素
":before"、":after"の"display"に指定可能な値は、"none""inline"。 その他の値は"inline"同じ。

p.note:before { content: "Note: " }

ちょっと豆知識

結構知らない人がいるかもなネタです。
この擬似クラスなどのあとにさらにセレクタを追加することができます。

例えばこういう指定の仕方ができます。

a:hover span { color:#ff0000; }

この指定はアンカーにマウスオーバーした時だけ中の"span"タグの文字を赤くしています。

使い方によってはかなり便利です。 ＞＜