方法1: :nth-last-child() 疑似クラスを使用する方法
.parent-element :nth-last-child(-n+3) {
/* スタイルの適用 */
}
この方法では、.parent-element
の直下の最後の3つの子要素に対してスタイルが適用されます。
方法2: :last-child 疑似クラスを使用する方法
.parent-element :last-child,
.parent-element :last-child-1,
.parent-element :last-child-2 {
/* スタイルの適用 */
}
この方法では、.parent-element
の直下の最後の子要素3つに対してスタイルが適用されます。:last-child
は最後の子要素、:last-child-1
は最後から2番目の子要素、:last-child-2
は最後から3番目の子要素を選択します。
方法3: 子要素の数を利用する方法
.parent-element:nth-last-child(-n+3)~* {
/* スタイルの適用 */
}
この方法では、.parent-element
の直下の子要素のうち、最後の3つの要素以降の全ての要素に対してスタイルが適用されます。
これらの方法を使うことで、要素の最後の3つの子要素に対して特定のスタイルを適用することができます。適用したいスタイルに応じて、上記の方法のいずれかを選択してください。