こんにちは、かずです。
前回いわゆるアウトプットしたら結構覚えられたのでこれはやるしかない!
となったので、色々忘れがちなものを書いていこうと思います。
今回は初歩的も初歩的ですが、結構使う「何番目(nth)系CSS」です!
要素の最初
親要素から見た、最初の子要素の指定。
-childはすべての子要素の最初、-of-typeは指定した子要素の最初です。
要素の最後
:last-child
:nth-of-type
:nth-of-type
親要素内の最後の子要素ですね。上記と同様にすべてか指定した要素かですね。
n番目
:nth-child(n)
:nth-of-type(n)
:nth-of-type(n)
nを数値にし、最初から数えてn番目を指定します。
(2n)や(3n)で倍数指定も可。
後ろからn番目
:nth-last-child(n)
:nth-last-of-type(n)
:nth-last-of-type(n)
単純に後ろから数えた要素の数を指定です。
○番目から●番目まで
これほんとに忘れるんです!何回書いても忘れるんですがこれで忘れないことを祈ります・・・
:nth-child(n + X)
X番目から最後の要素まで。
:nth-child(-n + X)
最初からX番目の要素まで。
:nth-last-child(-n + X)
最後からX番目の要素まで。
:nth-last-child(n + X)
最後からX番目以前の要素。
特に最後の2つとかもうどっちがどっちなのか書いて判別すること多々だったのでしっかり覚えます!
それでは。
-
人気の記事
-
新着記事
-
カテゴリー
:nth-of-type