2 элемента с одинаковым CSS, изменить только первый

Question

<header class="entry-header">
   <div class="entry-header-inner">
       <h1 class="entry-title">TITLE 1</h1>
   </div>
</header>

в другом месте на странице:

<header class="entry-header">
   <div class="entry-header-inner">
       <h2 class="entry-title">TITLE 2</h2>
   </div>
</header>

Я хочу повлиять на TITLE 1 с помощью css, не затрагивая TITLE 2. Это сгенерированный код, я не могу добавить ID. Также я не нашел подходящего родителя для TITLE 1.

Как мне это сделать? Возможно без javascript или Jquery. С этим если не возможно.

Answer 1

Вы можете применить CSS к .entry-title h1, который будет применяться только к ТИТУЛУ 1, так как ваш ТИТУЛ 2 - h2

- РЕДАКТИРОВАТЬ: : Использовать .entry-header-inner h1 не .entry-title h1

Answer 2

Если вы хотите выбрать заголовок первого заголовка, какой бы он ни был H1 или H2, следующий код должен работать.

.entry-header:nth-child(1) .entry-title{ /* your css here */ }