[CSS]疑似要素と疑似クラスを使ってさらに細かくスタイルを指定する

疑似要素と疑似クラスを使うと通常よりもさらに柔軟にスタイルを変更することができます。疑似要素と疑似クラスってなんだ？となるかもしれませんが、私の乏しい表現力ではうまく説明できる気がしないので、実際にCSSを見てもらう方が早いと思います。

ということで、よく使うものを紹介させていただきますので、以下を読んでみてください。

マウスカーソルを重ねた時にスタイルを変化させる

マウスカーソルを要素に重ねた時にスタイルを変更するには:hoverという疑似クラスを使います。使い方は簡単でセレクタの後ろに”:hover”をつけてスタイルを指定するだけです。

以下のようにリンクに使うことが多いです。

a:hover{
color:green;
}

このように指定すると、リンクにマウスカーソルを重ねた時にテキストの色が赤に変化します。

また、:hoverはリンクに対してよく使いますが、リンクによく使う疑似クラスは他にも以下のようなものがありますので、併せて覚えておきましょう。

:link
未訪問のリンクだけスタイルを変化させる

:visited
訪問済のリンクだけスタイルを変化させる

:active
該当の要素をクリックしている時にスタイルを変化させる

リスト(<li>)の中で最初の要素だけもしくは最後の要素だけスタイルを変更したい時に便利なのが、疑似クラスの:first-childと:last-childです。

使い方は簡単でliセレクタの後ろに疑似クラスをつけるだけです。

li:first-child{
font-weight:bold;
}

このようにstyle.cssに記述すると、リストの中の最初の要素だけ太字になります。逆に:last-childをセレクタにつけると一番最後の要素が太字になります。

フォームの入力時だけスタイルを変化させる場合、:focusを使います。

.form:focus{
font-style:italic;
}

このように記述すると、テキストフォーム(クラスform)の中をクリックして入力できる状態になると、中の文字が斜体になります。

要素の最初の1文字だけスタイルを変更する場合、:first-letter疑似クラスを使います。例えば、div要素の最初の1文字目だけフォントサイズを大きくするには、以下のように記述します。

div:first-letter{
font-size:28px;
}

このように記述することでdiv要素の最初の一文字目だけフォントサイズを28pxにすることができます。

これに似たもので、要素の最初の一行だけスタイルを変化させる:first-lineという疑似クラスもありますので、ぜひ試してみてください。