Выберите первого внука неоднородного стека dom

#css #css-selectors

Вопрос:

У меня есть этот сценарий, в котором мне нужно создать стороннее приложение, которое генерирует диаграммы SVG, проблема в том, что оно не соответствует количеству элементов G, которые оно генерирует для легенды, мне нужно сделать заголовок легенды полужирным, и он не отличает заголовок легенды от текстовых элементов легенды.

Я получаю:

 
<g class=".legend">
  <text>Legend Title</text>
  <g>
    <text>element1</text>
    <text>element2</text>
  </g>
</g>
 

но он развернется и сделает что-то вроде этого:

 <g class="legend">
 <g>
  <text>Legend Title</text>
  <g>
    <text>element1</text>
    <text>element2</text>
  </g>
 </g>
</g>
 

количество добавляемых элементов g, по-видимому, варьируется, и оно может добавить еще <g> один вокруг легенды, только вокруг заголовка легенды или только вокруг текста легенды.

g.legend text:first-child не работает, тоже выбирает первый элемент.

g.legend > text:first-child не будет работать последовательно, так как они, похоже, непоследовательно складывают элементы g

Я устал от n-го типа(1), зная, что это тоже не сработает. Я не могу использовать javascript для этого стиля, так как файл CSS добавляется в приложение в качестве расширения для добавления пользовательского стиля.

Я рассматривал здесь аналогичные вопросы, но ни у одного из них нет такой же проблемы, как у меня, или я ее не нашел.

любые идеи, кроме проклятия плохим разработчикам :), я готов к тому, что IE не будет иметь улучшенного стиля, если он работает в других браузерах.