特定のクラスをもつ要素でnth-child,nth-of-typeは使えない

  • ブックマーク
  • -
    コピー
nth系の擬似クラスを利用して「○○個目の要素にはスタイルを付与」なんてことをよくやりますが、クラス名を付与した要素をnthを使って数えてCSSでスタイルを付与することは現段階ではCSSのみで実装できないようです。
nth-childtnth-of-typeについてはこちら

特定のクラスを付与した要素はnthで利用できない


   <div class="sample">
        <p>1</p>
        <p class="acitve">
            2
        </p>
        <p>3</p>
        <p class="acitve">
            3
        </p>
        <p>5</p>
    </div>

このようなマークアップの場合は後述のとおり、セレクターのみでは数えることができますが「○○個目の.active」は選択できません。

有効なnthの指定


.sample p:nth-of-type {
   color:red;
}

無効なnthの指定


.sample p.active:nth-of-type {
   color:red;
}

問題の解決方法

:has擬似クラスについての記載がある記事
:has擬似クラスがCSS4の時に使えるようになる予定ですが、同様にCSS4では:nth-​​matchが利用可能となるためそれまでCSSのみでの実装は難しそうです。

li:nth-​​match(2 of .active){ 
color:red;
}

JavaScriptを利用した解決方法

CSSだけでは難しいのでJavaScriptを利用して実装する場合は後述のコードで実装可能です。JSのみとjQueryを使った短縮版も記載してあります。

// JavaScriptのみ
document.getElementsByClassName( 'active')[1] .style.color = 'red';

// jQueryを利用
$( '。active:eq(1)')。css( 'color'、 'red');


前述のコードでは2番目の.activeの要素がにスタイルを個別で付与してあります。0から数字を数えているので3番目の要素を指定したい場合は2、6番目の場合は5とそれぞれ数字を変えると指定することができます。

参考URL

CSS Select nth element with class
  • ブックマーク
  • -
    コピー

この記事を書いた人

Susumu Seino

1988年 東京都足立区生まれ。瀬戸内海の小島と東京に拠点を持ち、2020年からは夫婦でアドレスホッピングを計画しているデジタルノマドな日本人。デジタルパブリッシング代理店のアニューマの創業者です。