こんばんは！今日はCSS3のスーパー便利だと思う擬似クラスをおさらいも兼ねてご紹介！
擬似クラスってなんだ？
はい。恐らくCSSを学び始めたら、かなり初期段階で学ぶであろう、有名な擬似クラスを一つ。
:link,
:visited,
:hover,
:active
一つじゃなく四つも出てしまいましたが、恐らくこれが一番有名でしょう！実際メッチャ使うしね…上記のようなヤツを擬似クラスと呼びますっ！
でも今日は擬似クラス中級者部門！と勝手に名付けまして、ちょっと便利な擬似クラスを紹介しますっ！
まずは…
:not()
これ最近メッチャ使ってます。
要は()の中を除いて処理を行うっていう擬似クラスです！
例えばなんですが、グローバルナビとかで横並びになっていて、両端以外にボーダーをつけたい！って時とかありますよね？いや、あるはず！
そんな時は多分
li{
border-left: 1px solid gray;
}
li:first-child{
border-left: none;
}
/*もしくは*/
li{
border-right:1px solid gray;
}
li:last-child{
border-right:none;
}
こんな感じで書きますよね？いや、書くはず！ボクもずっとこう書いてました。とゆーかこの:first-childとかも擬似クラスなんだけどね…まぁ、それはさておき…
実は:notを使うとこんな感じで書けますっ！
li:not(:first-child){
border-left: 1px solid gray;
}
/*もしくは*/
li:not(:last-child){
border-right: 1px solid gray;
}
な、な、なんと！6行かかってたのが、3行に早変わり！最初はちょっと見にくかったのですが、慣れれば完全にこれで問題なし！ちなみにIE8には対応しておりません！
他にも:not(.hoge)のような形で特定のクラスを外したり、:not(:nth-child(odd))といったように奇数(偶数)だけを外したりすることも出来ますっ！
一度使うと癖になる！！カッパえびせん的なヤツですっ！
:focus
うーん、:notに比べるとあんまり使わない感じではあるのですが、覚えておくと使う時は必ずくるぞっ！って感じのヤツですね！読んで字のごとく、フォーカスがあたった時に処理をするって擬似クラスですっ！
どんな時に使うの？？
完全に特定されるのですが、恐らく99%はinputの時に使うかと思います！
こんな感じ
/*inputを選択したら文字が赤くなる*/
input[type = "text"]:focus{
color: red;
}
うーん、実際ボクも使うことはあるのですが、考えてみたら、大体jQueryでfocusとblurをセットで何かしら処理をすることが多いので、何故これをわざわざ書いたのだろうか…
でも覚えといて損は全くない擬似クラスなのは間違いないです！
実際使うし！！
実はまだまだあるのですが、ちょっと長くなってしまったので、また次回にしましょうかね…
ついつい書いていると長くなってしまうね…
そんな感じで今回は擬似クラスってメッチャ便利やねん！第一弾でしたっ！！
ありがとうございました！