擬似クラスとは？
簡単に表すと要素の状態を表すことができます。
class_name:hover {
}
といった書き方ができますね。
まずは、何があるかを整理しておきます。
よく使う擬似クラス
hover
これはよく使うので覚えやすいもの。
マウスオーバーした際の状態を設定できます。
img:hover {
}
といった形でアイコンにカーソルが当たった時に少しサイズを大きくするとかって使い方をします。
注)あくまでサンプルです。以降同様
focus
これはわかりやすいですね。
フォーカスが当たっている時の状態を設定できます。
入力フォームなどで使い勝手が良いですね。
checked
チェックボックスやラジオボタンで多用するもの。
これも自然と覚えていきますね。
チェックボックスやラジオがチェックされている時の状態を設定できます。
input[type=”checkbox”]:checked, input[type=”radio”]:checked {
}
といった感じで使います。
チェックボックスについては以下も併せて参考に
チェックボックスをカスタマイズしてみようと思う。 一部、wordpressのテーマでCSSが当たっている部分もあるので、必要であればデベロッパーツールで見ていただければと・・・m(_ _)m チェックボックスを少しずつよ …
disabled
これもよく使いますが、非活性としている時の状態を設定できます。
非活性にした時に背景色をグレーに網掛けして押せないイメージにする！！といった時に使います。
button:disabled {
}
といった形ですかね。
あまり使わないけど知ってたら便利？な擬似クラス
active
クリックなどでアクティブになっている間の状態を設定できます。
なかなか使い所が難しいですね。
クリックした際に適用できる擬似クラスないかな？といった際に出会う確率が高いですが、
クリックした際の擬似クラスはないので、ご注意ください。
クリックした時のHTMLの作成方法、CSSの当て方の方法として以下に記載しているので参考までに(使えるタイミングが限られます)
アイコンが動いたり、サイト内で動きをつけると少しリッチに見えます。もちろん動かしすぎはごちゃごちゃしてしまいますが、ちょっと動きつけたいなといった時に使えるように簡単なアニメーションをCSSで行う方法を整理しておきたいと思います。
link / visited
リンクに対して見たことあるかどうかで設定を変えたい時に使います。
私は、あまり使ったことはありませんが、見たことあるリンクと見たことないリンクでリンクの色を変える時に使えます。
a:link {
}
a:visited {
}
という感じですかね。
target
私は全く使ったことありませんが、内部リンクなどで飛んだ先に対して設定したい場合に使えるようです。
id指定での内部リンクを使う際に今度試してみます。
#id:target {
}
href=”#id”のリンクからid=”id”のリンクへスクロールしますが、この時id=”id”に対してスタイルを当てられるようです。
indeterminate
チェックボックスやラジオボタンの中間の状態を設定したい場合に使える模様。
使ったことないので、今度試してみようと思います。
おそらく、チェックする動きを少しアニメーションちっくにしたい時に使えるような気がします。
empty
子を持たない要素に対して設定できる。
場合によっては使いやすそう。
テーブルやリスクなどでよく使う擬似クラス
nth-child()
子要素の中での何番目という指定ができる
li:nth-child(2) {
}
といった感じ。
nth-last-child()
nth-child()は要素のはじめからでしたが、
nth-last-child()は後ろから数えて何番目という指定ができます。
nth-of-type()
兄弟要素の中で何番目の要素に適用といった形で指定できる。
nth-last-of-type()
nth-of-typeの後ろからバージョンですね。
first-child
一番最初の子要素。
last-child
一番最後の子要素。
first-of-type
兄弟要素の中で一番最初の要素。
last-of-type
first-of-typeの一番最後の要素版
他にもこんなのあります
あまり使わない気がするので、必要に応じてググることにしましょう(書くのに疲れたわけじゃないよ？たぶん)。
only-child
only-of-type
