カテゴリー:CSS※この記事は4分ほどで読めます。DESIGNのサブロー(@saburo_design)です。この何番目を指定してスタイルを適用させる系の擬似クラスは私もWeb制作の際には良く使います。私はソラではタグが打てないので毎回毎回自分のサイトからコピペしたり、ググってコピペしたりしてました。回数も回数なので備忘録も兼ねてもう自分のブログに解説と一緒に書いておこうと思います。使う何番目指定系の擬似クラスだけをピックアップしました。『解説なんざいらねぇよ!』と急ぎコピペしにこのページにやってきた人向けにCSS何番目系一覧を作りました。上から2番目だけ:nth-child(2)下から3番目だけ:nth-last-child(3)上から5番目まで全部:nth-child(-n+5)上から6番目以降全部:nth-child(n+6)下から5番目まで全部:nth-last-child(-n+5)下から6番目以降全部:nth-last-child(n+6)以降はそれぞれの擬似クラスの解説になります。下から5番目まで全部・下から6番目以降全部まとめ最初だけ・最後だけ:first-child一番最初の要素にのみスタイルを適用します。リストリストリストリストリスト:last-child最後の要素にのみスタイルを適用します。リストリストリストリストリストリストの最初や最後のborderのラインを消したり、marginでスペースを調節したりする時に使えます。奇数・偶数:nth-child(odd)奇数番目の要素にのみスタイルを適用します。リストリストリストリストリスト:nth-child(even)偶数番目の要素にのみスタイルを適用します。リストリストリストリストリストtableなどで表を作った時に、1行ごとに色を変えたりする時に使えます。3の倍数・3の倍数+1:nth-child(3n)3の倍数の要素にのみスタイルを適用します。(3番目,6番目,9番目,12番目~)リストリストリストリストリストリストリスト:nth-child(3n+1)3の倍数に+1した数字の要素にのみスタイルを適用します。これは少し分かりづらいかもしれませんがよく使う擬似クラスの一つです。これは1番目にもスタイルが適用されるのがポイントです。(1番目,4番目,7番目,10番目~)リストリストリストリストリストリストリストリストフロートを使って横並びのオブジェクトを配置する際に良く使ってました。横並びオブジェクト上から2番目だけ・下から3番目だけ:nth-child(2)上から2番目の要素にだけスタイルを適用します。リストリストリストリストリスト:nth-last-child(3)下から3番目の要素にだけスタイルを適用します。リストリストリストリストリスト新着記事3件まで『new』の文字を表示させる時などに使えます。上から5番目まで全部・上から6番目以降全部:nth-child(-n+5)上から5番目までの要素全部にスタイルを適用します。リストリストリストリストリストリストリスト:nth-child(n+6)上から6番目以降の要素全部にスタイルを適用します。リストリストリストリストリストリストリストリスト下から5番目まで全部・下から6番目以降全部:nth-last-child(-n+5)下から5番目までの要素全部にスタイルを適用します。リストリストリストリストリストリストリスト:nth-last-child(n+6)下から6番目以降の要素全部にスタイルを適用します。リストリストリストリストリストリストリストリストまとめ以上が私が良く使う何番目系の擬似クラスでした。上記で紹介した擬似クラスに:notを加えれば『○○以外にスタイルを適用する』という事もできます。:not(:first-child)で、最初の要素以外全部にスタイルを適用するとなります。(私は使うことはほぼ無いのですが)ひとまずこれだけ覚えておけば大体のレイアウトには対応できるはずです。プロフィールサブロー(@saburo_design)Web関係のお仕事をやってます。美味しいものを食べに行ったり技術録を書いたり。最近ブログ用のデジカメを買って浮かれています。ツイッターとかインスタグラムもやってますのでフォローもお気軽にどうぞ。関連記事CSSサイトのクリック済み・訪問済みのリンクの文字色をCSSで変えてリピーターに優...2017.06.07CSSスマホでタップした時に一瞬出るハイライト表示をCSSで消す方法。DESIGNサブローデザインは大阪で働くWebデザイナーが書く雑記ブログです。WordPressの技術録やプラグインの紹介から趣味の事まで色々書いてます。technology.。