木代成達也
Posted,  By 木代成達也
WEBの階

コロンとダブルコロン

CSSの細かい部分をひとつ…
疑似クラス、疑似要素を使う場合コロンとダブルコロンを使います。

・疑似クラスではコロン「:」
・疑似要素ではダブルコロン「::」

このダブルコロンは疑似要素と疑似クラスを区別するためにCSS3から追加されているようです。
なので疑似要素もほとんどコロンで動きます。(いまのところは)

今後のことを考えると疑似要素はダブルコロンで書いたほうがいいかな、ということなので疑似クラスと疑似要素についてメモです。
φ(..)メモメモ

■擬似クラス

:hover

1番使っている疑似クラスではないかと思います。

他には

:link
:visited
:active

など(この他にもたくさんあります。

E:nth-child(n) ・・・ n番目の要素

クラスや要素がHTMLに記述してあり、

<div class="adshin"></div>

疑似クラスはこのクラスや要素が特定の状態にある時のスタイルを指定します。

:hover はマウスが乗っている状態を指します。

■疑似要素

::before

疑似要素では特定の要素にスタイルを付与できます。
::before などは content プロパティを使用して疑似的に要素を追加することができます。

li::before {
content:"・";
}

リストの頭に「・」をCSSで表示することができます。

他には

::after
::before
::first-letter
::first-line

こんなものがあります。

ECサイトなどのCMSを使われている場合にはHTMLがさわれない部分なども多々あります。
そんなときに疑似クラス・疑似要素を使えば、かゆいところに手がとどくかもしれません。

以上です。(`・ω・´)ゞ

このブログを書いたヒト
木代成達也
Webソリューション部 係長
Webソリューション部でコーディングを中心に担当しています。
HTML、CSS、PHP、Javascriptなどを日々勉強しています。
背中で語る男になりたいです。
WEBの階