css - CSS セレクタ nth-child

Question

少し複雑な CSS セレクターを作成する際に問題に直面しています。

'btn-group'を含むが、含まない「クラス」で div を選択したい'open'

だから私は次のようなものを持っています;

div[class*='btn-group']:not([class='open'])

問題は、上記の条件に一致する要素が約 5 ～ 6 個あることです。しかし、私はその中から最初のものを選びたいと思っています。どうすれば同じことができますか?

nth-child..を使用して行うことをお勧めします

Answer 1

このようにしてみてください

div [class*='btn-group']:not([class='open']):nth-child(1) {
    color:Red;
}

これを使用して、最初の子を選択できます

働くフィドル