CSSの擬似クラスがメッチャ便利やねん!

こんばんは!今日は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をセットで何かしら処理をすることが多いので、何故これをわざわざ書いたのだろうか…

でも覚えといて損は全くない擬似クラスなのは間違いないです!

実際使うし!!

実はまだまだあるのですが、ちょっと長くなってしまったので、また次回にしましょうかね…

ついつい書いていると長くなってしまうね…

そんな感じで今回は擬似クラスってメッチャ便利やねん!第一弾でしたっ!!
ありがとうございました!

Category :

コメントを残す

Related Posts

CSSでドラッグした文字の色を変える方法

Sassはレスポンシブで本領発揮する

CSSで要素を中央寄せにする方法

よく見るハンバーガーメニューを作ってみよう