アイ・オーダートレーディング

こんにちは。

システム担当の西本です。

CSSは任意で作成したクラス名が付けられた要素に、スタイル(装飾)を適用することができます。

たとえば、

.example{

color:red

}

というCSSは、<span class=”example”>この文字が赤色になります</span>

.example というクラス名が付けられた上記HTMLに、スタイルが適用されます。(spanでくくった文字を赤に変更するCSSですね)

そして、CSSには疑似クラスというものが存在します。

疑似クラスを利用することで、同じクラス名が付けられていても、状況に応じてスタイルを変更することができます。

例：

a:link{

color:red;

}

a:hover{

color:blue

}

この場合、疑似クラスは:linkと、:hoverになります。

:link　は、未訪問のリンクに対してCSSを適用します。

:hoverは、リンクにカーソルが重なった時に対して、CSSを適用します。

この場合、まだクリックしていないリンクの色は赤、リンクにカーソルが重なった時は、リンクの色が青になるというCSSです。

疑似クラスを取り入れることによって、今までJavaScriptで実現していたスタイルも、CSSのみで実現することが可能です。

 

今まで何気なく使っていたCSSですが、疑似クラスという名前があることに今回ブログを書いて初めて知りました＾＾；