Как выбрать только первый элемент, который имеет 7 внешних элементов с помощью CSS

Question

Я хочу выбрать только первый тег, но я не уверен, как. Я пробовал первый потомок и первый тип, но все элементы a выбираются. Возможно ли это, поскольку в нем много внешних элементов? Спасибо!

    <section class="contact">
        <div class="container">
            <h1 class="heading">contact</h1>
            <div class="row">
                <div class="text">
                    <div>
                        <i class="iconLocation"></i>
                        <div>
                            <h3>Location</h3>
<!--                           this is the a tag i want to select-->
                            <p>dfadsf<a href="#">this is the p i want to select</a></p>
                        </div>
                    </div>
                    <div>
                        <i class="iconPhone"></i>
                        <div>
                            <h3>Phone</h3>
                            <p>dfasdf<a href="tel:1111">1111</a></p>
                        </div>
                    </div>
                    <div>
                        <i class="iconEnvelope"></i>
                        <div>
                            <h3>Email</h3>
                            <p>fdadfas<a href="#">djfakljsdf@gmail.com</a></p>
                        </div>
                    </div>
                    <div>
                        <i class="iconClock"></i>
                        <div>
                            <h3>Hours</h3>
                            <p>Monday - Friday: 8AM - 8PM</p>
                            <p>Saturday and Sunday: 4AM - 8PM</p>
                        </div>
                    </div>
                </div>
                <div class="image">
                    <img src="">
                </div>
            </div>
        </div>
    </section>

Answer 1

Проблема заключается в прадедушке целевого тега <p>; это общий <div> с <div> братьями и сестрами. Таким образом, вам нужно связать псевдоселектор :first-of-type с этим и перейти вниз к <p>. Вам нужно только .text div:first-of-type div p, чтобы достичь этого, хотя вместо этого вам может потребоваться следующее, которое дополнительно использует дочерний комбинатор > для повышенной специфичности :

.contact > .container > .row > .text > div:first-of-type > div > p {
  color: red;
}

<section class="contact">
  <div class="container">
    <h1 class="heading">contact</h1>
    <div class="row">
      <div class="text">
        <div>
          <i class="iconLocation"></i>
          <div>
            <h3>Location</h3>
            <!--this is the a tag i want to select-->
            <p>dfadsf<a href="#">this is the p i want to select</a></p>
          </div>
        </div>
        <div>
          <i class="iconPhone"></i>
          <div>
            <h3>Phone</h3>
            <p>dfasdf<a href="tel:1111">1111</a></p>
          </div>
        </div>
        <div>
          <i class="iconEnvelope"></i>
          <div>
            <h3>Email</h3>
            <p>fdadfas<a href="#">djfakljsdf@gmail.com</a></p>
          </div>
        </div>
        <div>
          <i class="iconClock"></i>
          <div>
            <h3>Hours</h3>
            <p>Monday - Friday: 8AM - 8PM</p>
            <p>Saturday and Sunday: 4AM - 8PM</p>
          </div>
        </div>
      </div>
      <div class="image">
        <img src="">
      </div>
    </div>
  </div>
</section>