Борьба с ограничением :: перед одним указанным h2

Question

Вот так выглядит мой код. Ради этого я удалил всю ненужную информацию.

<div class="container">
<div class="newsletter">
    <div class="newsletter_title">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-5 col-lg-4 col-xl-3 col">
                <h2 class=".newsletter .newsletter_title">
                <span>Newsletter</span>
                </h2>
            </div>
        </div>  
        <div class="row">
            <div class=" col-xs-12 col-sm-7 col-md-7 col-lg-8 col-xl-9 col">
                <div id="newsletter_embed_signup_scroll">
                    <div class="col-xs-12 col-md-12 col-lg-6 col-xl-5">
                        <h2 id="newsletter_embed_signup">Subscribe to our mailing list</h2>
                        <h3 id="newsletter_embed_signup">(And get a 10% voucher)</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Как видите, теги <h2> и <h3> имеют разные классы и присваиваются идентификаторы. В таблице стилей CSS я адрес .newsletter .newsletter_title h2::before, который затем применяется к #newsletter_embed_signup. Нажимаем, потому что он разделяет тот же контейнер (?). Чего мне не хватает?

Answer 1

Ответ AndrewL64 совершенно правильный. Просто хочу отметить, что вы не должны использовать один и тот же идентификатор несколько раз, как в примере ниже:

<h2 id="newsletter_embed_signup">Subscribe to our mailing list</h2>
<h3 id="newsletter_embed_signup">(And get a 10% voucher)</h3>

В противном случае вы скоро столкнетесь с новыми проблемами, поэтому используйте вместо этого классы.

Answer 2

Чтобы нацелиться на первое h2, включите в свой селектор имя класса первого h2 "newsletter", например:

.newsletter .newsletter_title h2.newsletter::before {
  /* style properties here */
}

---

Чтобы указать второй h2, укажите идентификатор h2 "newsletter_embed_signup" в вашем селекторе следующим образом:

#newsletter_embed_signup::before {
  /* style properties here */
}

Тот же подход, что и выше, можно использовать и для элементов h3.

---

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

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