コーディングの業務をしていて使う頻度の高い:nth-child()。とても便利ですね。

痒い所に手が届くみたいなやつですよね。

今回はその:nth-child()の擬似クラスの中でも“of S” 構文について解説します。

“of S” 構文は特定の要素やクラスを指定してCSSの装飾を適用することを可能にするものです。今回の記事では、この構文の使い方をメインに紹介していきたいと思います。

目次

1. 基本的な使い方
2. “of S” 構文の使い方
3. まとめ

:nth-child()は複数個並ぶ兄弟要素の中のどれかに装飾を加えたい場合に重宝されるものですね。

おさらいがてらに基本的な使い方を見ていきましょう。

リストの1番目の要素に赤色を適用する場合。

一番基本的な使い方ですね。

今回の例だと１番目のリストの背景を赤色にしたかったので()の中に1を指定しました。

奇数・偶数で指定する場合。

()の中にodd は奇数番目の要素、even は偶数番目の要素を指定します。これにより、リストの背景色を交互に変えることができます。

３の倍数で指定する場合。

（）の中に特定の数字＋nと記述することで、その数字の倍数のリスト項目すべてを指定することができます。

今回の例で言えば、（）の中に3nと記述しているので、3の倍数番目の要素すべてを指定していることになります。そのため3番目、6番目、9番目のリスト項目が青背景になっています。

基本的な使い方はこんな感じかなと思います。

それでは、応用編となる“of S” 構文を見ていきましょう。

改めて“of S” 構文の説明をしますと、こちらを使うことで複数個並んでいる兄弟要素の中で特定のセレクタにのみCSSの装飾を適用させることができるものです。大文字のSはセレクタの頭文字を取っているのですね。

特定のクラスを持つ項目から選択したい場合

()の中に2 of .redと記述しました。この記述によってredというクラスを持つ項目の中から2番目のものを指定することができました。

装飾したい項目をより詳細に選ぶことができるわけですね。

特定のクラスを持つ項目から奇数・偶数で指定したい場合

特定のクラスをもつ項目の中から奇数・偶数のもののみを選ぶこともできます。

()の中にodd of .colorと記述することで奇数のcolorクラスのものだけ選択することができました。

特定のクラス以外にCSSのスタイルを指定したい場合

少し応用編です。

今度は()の中に(even of :not(.transparent))と記述してみました。

transparentというクラスを持たない（→:not(.transparent)）要素から偶数のもの（→even）を選択するという意味ですね。

:not()を指定することで選んだセレクタに一致しないものを選択することができます。

すべての項目にスタイルを適用したいけど、一部の項目のみ効かせたくない時などに有効ですね！

:nth-child()の基本的な使い方だけでも痒い所に手が届くようなものになっていますが、今回ご紹介した“of S” 構文も使いこなせるようになるともっと詳細に柔軟にCSSを書く事が可能になります。

マスターしてコーディングの時短に繋げていきたいですね！

これからも時短や効率化に繋がるようなCSSなどを紹介していきます！

愛知県内から名古屋市を中心にホームページ制作を行っている会社
株式会社 WWG（ダブルダブルジー）
愛知県 名古屋市中村区名駅5-16-17　花車ビル南館5F

TEL： 052-890-7007
※ ホームページ制作や活用サポートのお問い合わせはコチラから

いなり

コーダー

2022年入社。東進ハイスクールの現代文講師林修先生を敬愛してやまないコーダー。林先生に負けないくらいの知的好奇心や探求心を武器にホームページ制作に役立つ有益な情報を発信する。もぐら→おはやし→いなりという名前の変遷がある大変節操のないコーダーです。もう二度と変えません。