first-child と ntn-child(1) の共存

考えるな感じろということで、無心で更新しています。
先に忠告しておきますが、方針が変わりメモ記事になっているので閉じるか解除してくださいね。

疑問点

コーディングをしている時に、ふと疑問に思いました。 first-childってntn-child(1)でもよくないか?と思い、気になって作業を中断しました。

皆さんは気になりませんでしたか?

  • first-childで指定した後に、ntn-child(3)を指定する
  • ntn-child(1)で指定した後に、ntn-child(3)で指定する

仮の話にはなりますが、下の場合だと統一感があると思ったんですよね。

last-childは必要

不特定多数の要素がある場合は、数えるのがめんどくさいのでlast-childが便利です。
「ナビゲーションが1つ減ります」ってなっても、last-childの指定はそのままでOKなんで、楽なんですよね。


first-childって必要?

first-childはどれだけ要素があっても、最初の要素になりますよね?
となると「ntn-child(1)でいいよね」ってなったんです。

教える立場にある人は、どのように説明しているのでしょうか。


答えは歴史にあり

CSSで先にfirst-childが使えるようになったから共存している。

CSS2.1:first-child
CSS3 : ntn-child()

CSS2.1とCSS3で使えるセレクタ一覧表 - ウェブランサー


上記のバージョン時に、記述されているセレクタが使えるようになりました。

先にfirst-childが使用できるようになり、後にntn-childが使えるようになりました。
なので現状first-childとntn-childが共存している状態です。

first-childの機能を含むntn-childが後からできたということになります。

ちなみにCSS3でlast-childが実装されたので、last-childが今後残っていくのであればfirst-childも対称性として残りそうです。

どちらを使う?

実装するならどっちがいいのかって疑問が残ったままなので調べてみます。
first-child VS ntn-child(1) ですかね。

実装する側の見やすさや、処理速度になりそうですが、、、

ここで解決しておけば、今後first-childを使うのかntn-child(1)を使うのか考えなくて済むので頑張ります。

中途半端になってますが、今日はここまでです。

広告を非表示にする

T

O

P

飛車よりの角

Webデザインを基本としています。
読書・将棋(将棋ウォーズ2段)・筋トレにはまっています。最近では仮想通貨を少ししています。個人的メモのため、取捨選択はご自身の責任でお願い致します。