CSS - как настроить таргетинг на все элементы в первом экземпляре класса?

Question

Я пытаюсь целевым прямоугольника элемента в первого г элемент с классом «v-DataPoint v-трансформируемого-DataPoint» - поэтому я хочу, чтобы выделить только Rect элемента 1. См. Мой код CSS ниже:

<g class="v-datapoint-group"> 
    <g> 
     <g class="v-datapoint v-morphable-datapoint">First</g> 
      <rect>1</rect> 
     <g class="v-datapoint v-morphable-datapoint">Second</g> 
      <rect>2</rect> 
     <g class="v-datapoint v-morphable-datapoint">Third</g> 
    </g> 
</g> 

Может ли кто-нибудь помочь, как это сделать правильно? Я пробовал следующее:

g.v-datapoint-group g.v-datapoint.v-morphable-datapoint { 
    background-color:yellow; 
} /* highlights word First, Second, Third */ 

g.v-datapoint-group g.v-datapoint.v-morphable-datapoint rect { 
    background-color: yellow; 
} /* doesn't do anything */ 

g.v-datapoint-group g.v-datapoint.v-morphable-datapoint:first-child { 
    background-color: yellow; 
} /* highlights word First */ 

g.v-datapoint-group g.v-datapoint.v-morphable-datapoint:first-child rect { 
    background-color: yellow; 
} /* doesn't do anything */ 

g.v-datapoint-group rect { 
    background-color: yellow; 
} /* highlights both 1 & 2 */ 

g.v-datapoint-group rect:first-child { 
    background-color: yellow; 
} /* doesn't do anything */ 

Любые идеи о том, как настроить прямой элемент 1?

Спасибо, Агата

Answer 1

Попробуйте это:

g.v-datapoint.v-morphable-datapoint:first-child { 
    background-color: yellow; 
} 

EDIT

Если вы хотите просто прямоугольник под первым G, добавить эту информацию:

g.v-datapoint.v-morphable-datapoint:first-child + rect { 
    background-color: yellow; 
} 

Answer 2

Попробуйте g.v-datapoint-group g.v-datapoint.v-morphable-datapoint:nth-of-type(1) + rect. Это должно выбрать все sibling rect s первой точки данных.