コーディングでは、他人から見たとき見やすいコードにすることを心がけますよね。
先輩が書いたコードを見るとなんか見やすいなって思うんです。
そこで、見やすいコードと見にくいコードの何が違うのだろうと考えたときに、不要なタグやクラスがなく、全体がすっきりしていることが見やすいコードへの近道だと感じました！
ということで、今回は不要なクラス指定をせずにCSS側で要素を操れる擬似クラスを紹介していこうと思います。
擬似クラスとは
擬似クラスとは要素の状態により、スタイルの指定をすることができるクラスです。
そのため、不要なクラスをつける必要がなくなり、すっきりとしたコードにすることができます。
どれくらいコードがすっきりするのか以下で比較をしてみました。
Before
擬似クラス未使用のため、クラスをつける必要があり、コードが見づらい。
1 2 3 4 5 6 7 8 9 | <ul class="list"> <li class="first">1番目</li> <li class="list02">2番目</li> <li class="list03">3番目</li> <li class="list04">4番目</li> <li class="last">5番目</li> </ul> |
After
擬似クラスを使用したため、クラスの使用が最低限になり、コードが見やすい。
1 2 3 4 5 6 7 8 9 | <ul class="list"> <li>1番目</li> <li>2番目</li> <li>3番目</li> <li>4番目</li> <li>5番目</li> </ul> |
すっきり度が一目瞭然ですね！
この違いを見ると、擬似クラスを使いたくなりますよね。
擬似クラスの使い方
それでは擬似クラスの使い方から紹介していきます。
CSS
1 2 3 4 5 6 7 8 9 10 11 12 | .ttl{ font-size: 20px; font-weight: bold; transition: 0.3s ease-in-out; } .ttl:hover{ //ここ！！ opacity: 0.8; } |
CSSでは、クラス名(ID名やタグでも可):擬似クラス名 と記述します。
ですので擬似クラス:hoverを使いたい場合は、上記コードのように .ttl:hover となります。
SCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 | .ttl{ font-size: 20px; font-weight: bold; transition: 0.3s ease-in-out; &:hover{ //ここ！！ opacity: 0.8; } } |
SCSSは入れ子にすることが出来るので、非常に便利です。
.ttl内に、&:擬似クラス名 と記述します。
ですので擬似クラス:hoverを使いたい場合は、上記コードのように &:hover となります。
よく使う擬似クラスを紹介
CSSをお使いの方は、こちらの書き方を参考にしてください。
:hover
こちらは、マウスが上に乗った時にスタイルを変化させたい時に使用します。
また、マウスが上に乗っている状態をホバー又はマウスホバーと呼びます。
※:hover を使用するときは、スタイルの変化を滑らかに行うためにtransitionを指定しましょう。
色や透明度を指定
1 2 3 4 5 6 7 8 9 10 11 12 13 | .content{ transition: 0.3s ease-in-out; //☆transition @media screen and (min-width: 980px){ //PCのみ適用 &:hover{ background-color: #333; //要素の色 color: #fff; //テキストの色 opacity: 0.8; //透明度 } } } |
要素の大きさを指定
1 2 3 4 5 6 7 8 9 10 11 | .content{ transition: 0.3s ease-in-out; //☆transition @media screen and (min-width: 980px){ //PCのみ適用 &:hover{ transform: scale(1.03); //大きさ } } } |
-child
続いては、-childを紹介します。
-childは、応用がきいて非常に便利な擬似クラスの1つだと思っています。
主に使用するのは以下3クラスです。
:first-child
兄弟グループで一番最初の要素を指定
1 2 3 4 5 6 7 | .box{ &:first-child{ background-color: blue; } } |
- 要素1
- 要素2
- 要素3
- 要素4
:last-child
兄弟グループで一番最後の要素を指定
1 2 3 4 5 6 7 | .box{ &:last-child{ background-color: red; } } |
- 要素1
- 要素2
- 要素3
- 要素4
:nth-child()
兄弟グループ内での位置を()内に指定
2番目の要素を指定
1 2 3 4 5 6 7 8 | .box{ &:nth-child(2){ background-color: yellow; color:#333; } } |
- 要素1
- 要素2
- 要素3
- 要素4
毎3番目の要素を指定
1 2 3 4 5 6 7 | .box{ &:nth-child(3n){ background-color: green; } } |
- 要素1
- 要素2
- 要素3
- 要素4
- 要素5
- 要素6
- 要素7
- 要素8
偶数個を指定
1 2 3 4 5 6 7 | .box{ &:nth-child(2n 又は even){ background-color: orange; } } |
- 要素1
- 要素2
- 要素3
- 要素4
- 要素5
- 要素6
- 要素7
- 要素8
奇数個を指定
1 2 3 4 5 6 7 | .box{ &:nth-child(2n+1 又は odd){ background-color: pink; } } |
- 要素1
- 要素2
- 要素3
- 要素4
- 要素5
- 要素6
- 要素7
- 要素8
前から4番目以降を指定
1 2 3 4 5 6 7 | .box{ &:nth-child(n+4){ background-color: violet; } } |
- 要素1
- 要素2
- 要素3
- 要素4
- 要素5
- 要素6
- 要素7
- 要素8
-of-type
続いては-of-typeです。
指定方法は-childと同じなのでこちらで、-child ➡ -of-type で以下リストのように変換して考えてください。
:first-child ➡ :first-of-type
:last-child ➡ :last-of-type
:nth-child() ➡ :nth-of-type()
-child と -of-typeの違い
-childと-of-typeが混同してあまり違いが判らないという方もいるのではないでしょうか？
このブログで-childと-of-typeの違いをはっきりさせてしまいましょう！
-childと-of-typeのいったい何が違うのかといいますと、-childはタグやクラスに関係なく同階層でカウントされ、-of-typeは指定したタグやクラス内でカウントされます。
どういうことなのかは、以下を見て理解を深めましょう。
:first-childと:first-of-typeの指定①
HTML
1 2 3 4 5 6 7 8 9 | <div class="content"> <ul class="list"> <li>1番目</li> <li>2番目</li> <li>3番目</li> </ul> </div> |
:first-child
1 2 3 4 5 6 7 8 9 | .list{ li{ &:first-child{ background-color: darkred; } } } |
結果
- 1番目
- 2番目
- 3番目
:first-of-type
1 2 3 4 5 6 7 8 9 | .list{ li{ &:first-of-type{ background-color: darkblue; } } } |
結果
- 1番目
- 2番目
- 3番目
この場合は、どちらも「1番目」にスタイルが当たっていますね。
:first-childと:first-of-typeは同じじゃないかと思うかもしれませんが、次の例を見ていただければ違いを実感できると思います。
:first-childと:first-of-typeの指定②
HTML
1 2 3 4 5 6 7 | <div class="content"> <div>黒<div> <p>青</p> //スタイルをあてたい <p>黒</p> </div> |
:first-child
1 2 3 4 5 6 7 8 9 | .content{ p{ &:first-child{ background: blue; } } } |
結果
青
黒
一番最初のpタグを指定したはずなのに、スタイルがあたっていませんね。
:first-childでは指定したpタグの階層の要素すべてがカウント対象になります。
そのため、今回指定したいpタグのカウントは、nth-child(2)（階層内で2個目の要素）となります。
:first-of-type
1 2 3 4 5 6 7 8 9 | .content{ p{ &:first-of-type{ background-color: blue; } } } |
結果
青
黒
:first-of-typeでは指定したタグやクラス内での、一番最初の要素にスタイルがあたります。
今回だと、同階層内のpタグがカウント対象となりますので希望通り、最初のpタグにスタイルがあたっています。
:not()
こちらは、ある要素やタグを排除して指定したい時に使用します。
指定方法
1 2 3 4 5 6 7 | p{ &:not(排除したいタグ・クラス){ background-color: #000; } } |
クラスの排除を指定
HTML
1 2 3 4 5 6 7 8 9 | <div class="content"> <ul class="list"> <li>1番目</li> <li>2番目</li> <li class="black">3番目</li> </ul> </div> |
SCSS
「black」クラスを排除する
1 2 3 4 5 6 7 8 9 | .list{ li{ &:not(.black){ color: red; } } } |
結果
- 1番目
- 2番目
- 3番目
「black」クラスをつけていない要素の文字が赤くなりました。
上手く「black」クラスを排除できたことがわかりますね。
擬似クラスの排除を指定
HTML
1 2 3 4 5 6 7 8 9 | <div class="content"> <ul class="list"> <li>1番目</li> <li>2番目</li> <li>3番目</li> </ul> </div> |
SCSS
一番最初の要素を排除する
1 2 3 4 5 6 7 8 9 | .list{ li{ &:not(:first-child){ color: green; } } } |
結果
- 1番目
- 2番目
- 3番目
指定通り、一番最初の要素が排除されていますね。
このように、:not()内に排除したい要素を入れると簡単に特定の要素を除外できます。
:not() × 擬似クラスの組み合わせは使い勝手が良いので、ぜひ覚えておいてください！
Ex) :not(:not())
※ 擬似要素は指定できないので注意！
Ex) :not( .text :after)
まとめ
擬似クラスの便利さが少しでも伝わりましたか？
自分に理解できたものから、少しずつ使ってみましょう。
思い通りにいかず、あれ？と思ったときは、色々試してみると理解につながるかもしれませんね。
擬似クラスを自由自在に使えたら、コーディングはかなりしやすくなります。
それに不要なクラス命名が減り、コードがすっきりするので、使わないほかないんです。
少しずつ使い方を覚えて、綺麗で見やすいコードを心がけましょう！
