CSS 【実務・中級編】 empty疑似クラスによる空要素の判定 – CSS実践ガイド
お疲れ様です！チーフフロントエンドアーキテクトの「T」です。日々のコーディング、本当にお疲れ様。モダンなコンポーネント設計やJavaScript/TypeScriptのロジックに頭を悩ませることが多いと思いますが、実はUIの使い勝手や表示の...
属性セレクタと疑似クラス（状態：hover, focus, active, disabled等）
CSS CSS 【実務・中級編】 only-of-type疑似クラスの条件 – CSS実践ガイド
やあ、調子はどうだい？今日も元気に負債まみれのCSSと格闘していることだろう。今回は、CSSのセレクタ周りでも「名前は知ってるけど、実務でどこまで正確に挙動を理解して使ってる？」と聞かれると、ちょっと冷や汗をかきそうなやつを取り上げよう。そ...
CSS 【実務・中級編】 only-child疑似クラスの条件 – CSS実践ガイド
お疲れ。いいところに目を付けたな。CSSを書き始めて数年経ち、BEMだろうがTailwindだろうが一通りレイアウトが組めるようになった中級エンジニアが、次に直面する壁——それは「DOMの構造変化に強い、しなやかなコンポーネント設計」だ。A...
CSS 【実務・中級編】 last-of-type疑似クラスの仕様 – CSS実践ガイド
「すいません、CSSで最後の要素だけにマージンを消したいんですけど、なぜか `:last-child` も `:last-of-type` も効かないんです…！」フロントエンドの現場で、何度この相談を受けたか分かりません。そしてその度に私は...
CSS 【実務・中級編】 first-of-type疑似クラスの仕様 – CSS実践ガイド
現場で絶対にやらかす「:first-of-type」の誤解。ブラウザの評価ロジックから学ぶ、CSSセレクタの正しい付き合い方フロントエンドの現場を率いるチーフアーキテクトの立場から、今日もコードレビューでよく見かける「あの問題」について話を...
CSS 【実務・中級編】 nth-last-of-type疑似クラスの活用 – CSS実践ガイド
こんにちは。プロダクトのフロントエンドを預かる立場として、日々君たちの書くコードを見ているが……おっ、今日はCSSのセレクタ、それも少しマニアックで実務でめちゃくちゃ効く `:nth-last-of-type` について気になっているのか。...
CSS 【実務・中級編】 nth-of-type疑似クラスと要素型の関係 – CSS実践ガイド
フロントエンドの現場で仕事をしていれば、誰もが一度はCSSのセレクタ指定で頭を抱えた経験があるはずだ。「あれ、なんでこのスタイルが当たらないんだ……？」「構造は合っているはずなのに、なぜか隣の要素まで赤くなってしまう……」。特に、リストやカ...
CSS 【実務・中級編】 nth-last-child疑似クラスによる逆順選択 – CSS実践ガイド
やあ、お疲れ。最近、動的なリストのスタイリングで頭を悩ませていないか？「リストの最後の3件だけ特別に背景色を変えたい」とか、「APIから何件降ってくるか分からない検索結果の、下から数えて特定の要素だけにボーダーをつけたい」なんて要件、実務で...
CSS 【実務・中級編】 nth-child疑似クラスの数式構文 – CSS実践ガイド
おい、調子はどうだ？今日も元気に `` の海を泳いでいることだろう。さて、今回はCSSの `:nth-child()` についてだ。「ああ、偶数行に色を塗るやつね `nth-child(even)` でしょ？」と思ったそこの君。おいおい、そ...
CSS 【実務・中級編】 last-child疑似クラスの活用 – CSS実践ガイド
やあ、お疲れ。最近、君が書いたCSSのレビューをしていて、ふと気になったところがあったんだ。リストやカードのレイアウトで、最後の要素だけボーダーやマージンを消すために、わざわざ `.item:last-of-type` とか、果ては Jav...