CSS 【実務・中級編】 訪問済みリンク擬似クラス :visited – CSS実践ガイド
こんにちは。フロントエンドチームのコードレビューを見ていると、時折「おっ、そこに手を出すか」とハッとさせられるコードに出会うことがあります。今回は、CSSの歴史のかなり古い部分から存在しながら、現代のWeb開発でも意外とハマりどころが多い擬...
基本セレクタと組み合わせ（タグ, クラス, ID, 子孫・子・隣接）
CSS CSS 【実務・中級編】 root擬似クラスの役割 – CSS実践ガイド
やあ。最近、チームのCSS設計やリファクタリングを見ていて、ふと気になることがあったんだ。「あ、ここ、まだ `html` セレクタでCSS変数定義してるんだな」ってね。君も経験があるだろう？ 巨大なレガシーコードベースや、ちょっと急いで立ち...
CSS 【実務・中級編】 has擬似クラスの実務デザインパターン – CSS実践ガイド
おい、調子はどうだ？今日も元気に `!important` で汚されたレガシーコードと格闘してないか？なあ、フロントエンドの現場にいる中級者のお前らなら、一度はこう思ったことがあるはずだ。「おい、子要素の状態を親に伝えてスタイルを変えたいだ...
CSS 【実務・中級編】 not否定擬似クラスの高度な組み合わせ – CSS実践ガイド
やあ、最近のコードの書きぶりはどうだい？コンポーネント指向が当たり前になって、CSS-in-JSやらTailwind CSSやらが全盛の昨今だけど、結局のところ、バニラなCSSのセレクタの機微をどこまで理解しているかで、マークアップの美しさ...
CSS 【実務・中級編】 only-of-type擬似クラスの適用条件 – CSS実践ガイド
やあ。今日も今日とてCSSの沼にハマっているかい？フロントエンドの現場で長く生き残っていると、「あれ、このセレクタ、頭の中では完璧に動くはずなのに、なんでブラウザはスタイリングしてくれないんだ……？」っていうデスマーチの1歩手前みたいな瞬間...
CSS 【実務・中級編】 last-of-type擬似クラスの適用条件 – CSS実践ガイド
やあ。フロントエンドのコードベースと毎日格闘している君たちへ。今日はCSSの「闇」というか、意外と直感的じゃない挙動でバグを生みがちな `:last-of-type` について話をしよう。「最後の子要素を選択する」という言葉を鵜呑みにして、...
CSS 【実務・中級編】 first-of-type擬似クラスの適用条件 – CSS実践ガイド
CSSの深淵へようこそ。現場でコードを書いていて、「なんでこのスタイルが当たらないんだ？」と頭を抱えた経験、誰にでもあるはずだ。特に `:first-of-type` は、その名前からくる直感的なイメージと、ブラウザが裏側で処理している「型...
CSS 【実務・中級編】 nth-last-of-type擬似クラスの仕組み – CSS実践ガイド
CSSの「後ろから数える」魔術：`:nth-last-of-type` を使いこなせば、レイアウトの苦労は半分になるフロントエンドの現場で、こんな場面に遭遇したことはないだろうか？「リストの最後の要素だけ余白を消したい」「一番下の要素だけ色...
CSS 【実務・中級編】 only-child擬似クラスの適用条件 – CSS実践ガイド
`:only-child` の深淵：なぜ「ただ一つの子」という条件が、現場で最強の武器になるのかフロントエンドの現場でCSSを書いていると、どうしても「要素が1つしかない時だけ特別なスタイルを当てたい」というシチュエーションに出くわす。リス...
CSS 【実務・中級編】 last-child擬似クラスの適用条件 – CSS実践ガイド
CSSを書いていると、誰もが一度は「あれ、なんで`last-child`が効かないんだ？」と頭を抱える夜があるはずだ。「最後の要素を装飾したい」。単純な要件に見えて、その裏側にあるDOMの仕様を理解していないと、CSSは途端に意地悪な挙動を...