クラス名で特定の要素をターゲットにする: CSS nth-Child アプローチ

チャレンジ: クラス名に基づいて、同じクラス名を持つ要素を選択的にスタイル設定するマークアップ内の位置に関係なく、位置が決まります。

解決策: nth-child() を使用するか、 nth-of-type() 親要素内の順序位置に従ってターゲット要素への疑似セレクター。

nth-child() Pseudo-Selector

nth-child(n) pseudo-selector を使用すると、親の n 番目の子である要素のスタイルを設定できます。たとえば、クラス "myclass":

.parent_class:nth-child(1) {
  color: #000;
}

2 番目と 3 番目の要素をターゲットにするには、次のセレクターを使用します:

.parent_class:nth-child(2) {
  color: #FFF;
}

.parent_class:nth-child(3) {
  color: #006;
}

nth-of-type() 擬似セレクター

nth-of-type(n) 擬似セレクターは、nth-child() と同様に機能しますが、次の要素に基づいて要素を選択します。親内のタイプ。これは、親内に同じ型の要素が複数ある場合に便利です:

.myclass:nth-of-type(1) {
  color: #000;
}

.myclass:nth-of-type(2) {
  color: #FFF;
}

.myclass:nth-of-type(3) {
  color: #006;
}

HTML の例:

  
my text1
  

  
my text2
  

  
my text3