【CSS】きみは "擬似クラス" 何個言えるかな？？ - Qiita

はじめに あなたは "擬似クラス" 何個言えますか？ 擬似クラスには、:hover や :active、:focusといったよく使うものから、 :is()や:where()、:has()といったこれからサポートされていくものまで たくさん種類があるのは、ご存知ではないでしょうか？ でも、"擬似クラス" 何個言えますか？と聞かれると数個くらいしか思い出せないと言う方は多いのではないでしょうか？ もしかしたら、15個以上言えたら、CSS玄人と言えるかも知れません。 この記事では、たくさん種類があるのは知っているけど、詳しくはわからない "擬似クラス" が、 何種類あるか、どんな擬似クラスがあるかをまとめました。 知らなかった "擬似クラス" の数を数えながら、読んでいただけると嬉しいです。 擬似クラス 擬似クラスとは？ 擬似クラスとは、セレクタのあとにつけることで、 指定した要素の状態に応じて

[kns_1234]

この記事では、CSSの疑似クラスが55個紹介されています。

[arapro]

どうでもいいけど「擬似クラス」「擬似要素」って名称、いまだに違和感を覚える / 違和感というか、「書いてるコードにクリーチャーが混ざってるような、かすかな嫌悪感」が近いかも。

[renos]

ポケモン151匹なら言えるのに擬似クラスは全然言えない…

[pekee-nuee-nuee]

cssってまじで年々難しくなってない？？

[otoan52]

よいまとめ。メデイアセレクタも増えそうな気配がある。CSSも進化すごい

[diveintounlimit]

把握できてないものがそれなりにあった。スクショちょいちょいミスってるんだけど、そこの修正提案ができんかった。

[sucelie]

客「IEで表示がおかしいんだけど！」今でもたまに言ってくるやついる。

[deep_one]

そしてこの全てに「ブラウザ対応」という情報があるんだろ…

[altar]

p :not(...) 、スペースが入ってて子孫ノードにマッチするようにしか見えない。クラスの前のスペースに意味があるCSSでこの表示をするエディタがあるとも思えないし、どういうことなのだろう。

[AzuLitchi]

input系、入力擬似クラス多いなー。WordPressのContactformカスタマイズとかちょいちょいあるから「cssだけでこういうことできる」って知っとくだけでも損はない。

[rryu]

いきなりis()から始まるのはなかなか厳しい感じがする。:indeterminateのサンプルが効いてないように見えるのはSafariが未対応だからっぽい。

[MXMXM]

あーもうばばぁはついていけない。

[mayumayu_nimolove]

言えないけどこういうのないかなーって調べると大抵あるのでその時に書く。

[TMCNE]

疑似クラスなんか知らなくてもcss書けるんだから難しくなってる訳ではないでしょ。使いたくないならjsでなんとかすれば良い

[prbaybe]

梨泰院と六本木？

[mohno]

ポケモンのわざとか特性を覚えるのと、どっちが大変だろうな（←比べんな、比べんな）

[issyurn]

いつの間にこんなに

[monacal]

擬似クラスでなんとかしたくなることよくあるけど、対応状況の問題とか保守的なご意見とかで結局採用してもらえずJavaScriptでなんとかするのあるあるだと思ってるんですけどみなさまの環境ではいかがですか

[Doraphie]

出力付きでわかりやすい

[mricopp]

知らないのいっぱいあった！ありがとうございます🙏

[sea295x2]

55もあるんだ、、、

[mysql8]

ラララ言えるかな？pseudoの名前〜♪