How to select only the first element that has 7 outer elements with CSS

Question

I want to select only the first a tag, but i'm not sure how. I've tried first child and first of type, but all the a elements get selected. Is it possible since it has many outer elements? Thanks!

    <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>

"_I want to select only the first a tag_" `document.getElementsByTagName('a')[0]` — takendarkk, May 16 '19 at 21:47
what is the element you need to select? you can add an extra class to identify it. — cesare, May 16 '19 at 21:49
@takendarkk - This question is not tagged as JavaScript, but rather CSS. Also, he aims to target the `
`, not the ``. — Obsidian Age, May 16 '19 at 21:49
I know i can easily add a class, but it is possible to select it without a class using css? — charlesFromSoCal, May 16 '19 at 21:53

score 1 · Accepted Answer · answered May 16 '19 at 21:49

The problem lies in the grandparent of the target <p> tag; it's a generic <div> with <div> siblings. As such, you need to chain the pseudo-selector :first-of-type to this, and navigate downwards to the <p>. You only need .text div:first-of-type div p to achieve this, though you might want the following instead, which additionally makes use of the child combinator > for increased specificity:

.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>

How to select only the first element that has 7 outer elements with CSS

1 Answers1