CSSの疑似クラスを使ってｎ番目の要素を取得
HTMLコーディングをしているとｎ番目の要素から間隔を空けたり、交互に彩色したりということが多いので、ｎ番目の要素（タグ）を取得できる便利なCSSの疑似クラスをメモ。 ｎ番目系の疑似クラス n番目系の疑似クラスは大きく分けて「-child」と「-of-type」の2種類の系統に分類できる。「i」の部分に整数値、odd（奇数）、even（偶数）、式（例：2n＋1）を指定可能。数値は親要素からの値になる。 種類-child-of-type最初:first-child:first-of-type最後:last-child:last-of-typei番目:nth-child(i):nth-of-type(i)後ろからi番目:nth-last-child(i):nth-last-of-type(i)１個だけ:only-child:only-of-typei番目以降:nth-child(n+i):nth-of-type(n+i)i番目以前:nth-child(-n+i):nth-of-type(-n+i)最後からi個:nth-last-child(-n+i):nth-last-of-type(-n+i)最後からi番目以前:nth-last-child(n+i):nth-last-of-type(n+i) 「-child」と「-of-type」の違い 「-child」と「-of-type」の違いはカウントの対象となる子要素の違い。「-child」は全部の子要素が対象になるのに対して、「-of-type」は子要素の中でも指定した要素のみがカウントの対象となる。 <div class="parents"> <div>兄</div> <div>自分</div> <p>1番目の弟</p> <p>2番目の弟</p> <p>3番目の弟</p> <div> <style> /*1番目の弟が指定される*/ p:nth-child(3) { color: #f00; } /*3番目の弟が指定される*/ p:nth-of-type(3) { color: #00f; } </style> その他のセレクタ 種類例隣の要素h3+p[class]や[href][src]など指定した属性p[class]属性内容の“一部”が一致p[class*="○○○○"]属性内容の“始め”が一致p[class^="○○○○"]属性内容の“最後”が一致p[class$="○○○○"]文章の一行目p::first-line要素が空の時ul:empty CSSのnth-childとnth-of-typeについて基本から学ぼう何番目系の便利なCSSまとめ
