まれに疑似クラス:not()が予想とちがう振る舞い（効いてほしくないところに効く）をすることがあったので、cssの詳細度についてきちんと調べ直しました。素直な感...

only-childの指定範囲はセレクタ名の通りで、:only-child疑似クラスを使用すると、兄弟要素を持たない要素を指定することができます。個人的にはリス...

「画期的な発明、hasセレクタ」でご紹介した新しいCSSセレクタである「:has()」ですが、今のところFirefoxが対応していません。その為、実際のサイト制...

これまでのcssは、先にある要素 → 後にある要素　の順番(親→子、兄→弟、隣)で詳細度を高めるしかありませんでした。それを逆向き(子要素 -> 親要素)に指定...

cssのcounter変数を利用すると、指定の要素に任意のcounterを設定することができ、設定されたcounterはcontentで利用することができます。...

属性（attribute）を利用したCSSセレクタ。混乱してどれを使うかわからなくなることがあるので備忘録でまとめておきます。属性セレクタとは解説サイトなどでは...

今回は、「兄弟関係にある」 n番目の要素を指定するセレクター「nth-child」のお話です。かるい気持ちで使用すると、css指定が効かなかったり、全然違う要素...

htmlとcssしか自由に編集できない環境でLightBox風のイメージギャラリーを作りたい。となったとき、これまでは :target疑似クラスを使用していたの...

久しぶりにCSSセレクタの話です。「n番目の要素」や「ホバー時」など、要素を特定するイメージがあるcssセレクタですが、「○○以外」を対象とできる :not と...

疑似要素before afterの基本の使い方と働き方、３つ以上の疑似要素をつなげて使う方法などを解説します

div > imgやdiv + pのように、+ > ~ で接続したcssセレクタを見かけることがあります。これらはcssの適用範囲を限定するセレクタの使い方です。それぞれの違いと使い方を解説します。