Felly00505
https://blog.hatena.ne.jp/Felly00505/
arms inc. Engineers' Blog
https://tech.arms-soft.co.jp/
フロントエンド
HTML
CSS
こんにちは、ユアサです。 以前業務内で活用してかなり便利だったので、今回はCSSセレクタの中でも便利なnth-childのof <selector>を使って工夫したストライプテーブルを作成してみたいと思います。 of <selector>の使い方 nth-child(○番目 of 特定のセレクタ)と記述でき、特定のセレクタの条件に当てはまる子要素に対してスタイルを付与できるようになります。 例えば記述すると.contents:nth-child(1 of p)のようになり、この場合『クラス名「.contents」の要素内の子要素pタグの1番目』という意味合いになります。 nth-child()…
190
<iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftech.arms-soft.co.jp%2Fentry%2F2025%2F06%2F25%2F090000" title="フィルタリングにも対応できるnth-childの「of <selector>」を使ってストライプテーブルを作ってみよう - arms inc. Engineers' Blog" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe>
https://cdn-ak.f.st-hatena.com/images/fotolife/F/Felly00505/20250624/20250624181715.jpg
Hatena Blog
https://hatena.blog
2025-06-25 09:00:00
フィルタリングにも対応できるnth-childの「of <selector>」を使ってストライプテーブルを作ってみよう
rich
https://tech.arms-soft.co.jp/entry/2025/06/25/090000
1.0
100%