前回:nth-child() の “of S” 構文で、細かく要素を指定する方法①で、:nth-child() の “of S” 構文とは何かお伝えしました。今回は実際にどのような表示になるか試してみたいと思います。

例①：
リストの中のリンゴ(appleのクラス名がついている箇所)の三番目の要素にだけ色をつけたい場合
下記　［Run Pen］を押下して確認してみてください。

上記のように、appleのクラス名が付いている三番目の要素に色を付ける事ができました。CSSの［li:nth-child(3 of.apple) ］の［(3 of.apple)］は、［apple］のクラスがついている中の三番目の要素と指定してます。

また、上記は静的サイトなら通常の:nth-child() の指定でも問題ありませんが、動的サイトに指定する場合は崩れる可能性があります。
要素が動いた場合どのような表示になるかを、以下の例で試していきたいと思います。

例②：
［ボタン］をクリックしたら、特定の要素が消えても交互に背景色をつけたい場合
ここでは、:nth-child() の “of S” 構文の動きの違いを分かりやすくするために、:nth-child() で指定した場合と、:nth-child() の “of S” 構文で指定した場合を書きます。
双方ともに、［even］の指定で偶数になる箇所に、ピンクの背景色をいれています。［ボタン］をクリックした際の表示を確認してみてください。(JavaScriptでボタンを押すと［.hidden］のクラス名を付けて、そのクラス名が付いた箇所をCSSで非表示にしています。)

:nth-child()で書いた場合

下記　［Run Pen］を押下して、［ボタン］の箇所をクリックして確認してみてください。

:nth-child()で指定した方は、細かい指定ができず、CSSで要素を非表示にした事で(HTMLに書かれているすべての要素に対しての偶数指定しかできない)、交互に色が付く表示が崩れてしまいます。

:nth-child() の “of S” 構文で書いた場合

下記　［Run Pen］を押下して、［ボタン］の箇所をクリックして確認してみてください。

一方の、:nth-child() の “of S” 構文では、［:not(.hidden)］のような(.hiddenのクラスが付いてない箇所が対象で偶数に色が付く)指定ができるので、CSSで要素を非表示にしても色の表示が崩れる事はありません。

このように、:nth-child() の “of S” 構文を使うと、CSSで特定の条件に合う要素だけを狙ってスタイルを適用できるので便利ですね。是非試してみてください。