hajipion.com「nth-child」と「nth-of-type」の違いどちらかを使ったことがあるという人は多いでしょう、このふたつ。「nth-child」と「nth-of-type」。ふたつとも「n番目の要素」を指定する擬似クラスです。↓こんなコードがあったとしたら、ブラウザではこう表示されます。nth-of-typeでも同様。そのふたつの違いってなんなのか!今から解明します。以下のようなソースがあるとします。oddは「奇数」を意味するので、ここでは奇数番目の子となるp要素が赤くなります。これをnth-of-typeで書くと......なんと、キャベツとトマトの代わりにピーマンが赤くなりました!赤ピーマンです!(よくわからない)なぜこうなったかというと、nth-of-typeはその名の通り「type」つまり「型」を見ており、順番を数えるときにpタグしか見ない!からなんですね。たしかに6個あるpタグのうち、1,3,5番目のpタグは赤くなってます。nth-childは全ての要素を数えるので、この例でいうと「野菜」という見出しも「偶数のもの」として数えられているわけです。理解できましたか?まとめるとこんな感じ。̄)正解は......みかん!nth-childなので、要素の数えは全体でおこないます。1つ目は「分類」、2つ目は「果物」、そして3番目は「みかん」ですね。正解はいちご!nth-of-typeは指定した型でのみ数えるので、pタグで囲われた「みかん」、「りんご」ときて、その次の「いちご」が赤くなるように書かれています。株式会社Basecampパートナー。ヤフー出身のデザイナーです。FOLIOというオンライン証券を共同創業し、デザインドリブンなサービス開発してました。趣味で日影しか通らないルート検索アプリ「inShade」とかも作ってました。株式会社Basecampパートナー。ヤフー出身のデザイナーです。FOLIOというオンライン証券を共同創業し、デザインドリブンなサービス開発してました。Postsここらで世界一わかりやすく「FinTechとは何か」を説明しよう。Postsここらで世界一わかりやすく「FinTechとは何か」を説明しよう。iPhoneの「充電できない」「接続できない」はもう起こりませんなぜpaymoやKyashやpolcaがよくて、Osushiが法律的にアウトなのか?PayPalも諦めた日本の「送金」事情。Productsフォリオ「VR」や「京都」など、多彩なテーマからえらんで投資ができるオンライン証券。Suiteruできるだけ女性専用車両に乗っていく「空いてる通勤ルート」検索アプリ。inShade設定した目的地までの「日陰」しか通らない経路を教えてくれる、日よけルート検索アプリ。グルメスパイ料理の写真を誰にもバレることなく撮影し、勝手に美味しそうに加工してくれるアプリ。IoTissueくしゃみをしたら自動でその方向にティッシュをぶっ飛ばすティッシュ箱。