nth-of-typeとonly-of-typeについて
前回はnth-chileを勉強しましたが、今回はそれと似たnth-of-typeとonly-of-typeを勉強していきます。
本日の教材動画はこちら
nth-of-type と only-of-type について
nth-pf-typeは「特定の親要素の中の”特定の子要素が対象”」となります。nth-childの時は「特定の親要素の中の”隣接する子要素が対象”」でしたので、少しだけ違うことが分かるかと思います。
次にonly-of-typeは「特定の親要素の中の”唯一の子要素が対象”」となります。子要素が一つのみの場合に適用されます。
言葉だけでは分かりにくいので、実際に書いて違いを見ていきましょう。
ひとまず上記のようなページを用意しました。内容は前回のnth-childと同じになっており、偶数のリストに色を付けるように指定しているような状態です。
nth-childは「隣接する子要素が対象」となりますので、例えばliの途中で別のタグを挟んでしまった場合
このようになります。偶数行に色を付けるよう指示していましたが、別タグを挟んだことにより隣接ではなくなったため、今度は6行目が始まりと認識され7行目が2行目と認識され、色が付くようになりました。
nth-pf-type の使い方
ではこれをタグ関係なく、li全体として認識してほしい場合どうするか？そこで使うのが nth-of-type です。
nth-child を nth-of-type に書き換えただけで、当初の目的通り偶数行にだけ色が付きなおしたことが分かります。
only-of-type の使い方
次にonlyの使い方です。only-of-type は子要素が一つのみの場合に適用されるものです。唯一の子要素に適応するものなので、（2n）などの記載も不要になります。なのでもしこのように
複数の子要素があった場合はうまく機能しません。ではこの最初のulのliを1つだけにしてみましょう。するとどうなるか。
子要素が1個（唯一）になったので、今度はきちんと適応されて最初のliがグレーになったのがわかりますね！
ちなみに2個目のulのliも1個だけにした場合、上記のようにちゃんと適応されます。
参考サイトなどをみていたところ、前回勉強したnthにもonly指定があるみたいですね（その場合は only-child と記載）。他にも色々見てみましたが、狙ったデザイン通りにしたい場合、childではなくtypeでくくってあげたほうがトラブルは少ないということがわかりました！たしかに何か挟まって数えなおしとかよりは、規則的に動いてくれた方が誤作動はおこしにくそうですよね。
【参考サイト】
