CODEWITHSUNDEEP
htmlhtml-select
Ritik Joshi
Ritik Joshi

Reputation: 93

How can I select first <p> element inside <article> element?

But here <article> element has other elements before first <p> element I tried section article p:first-child and section article>p:first-childI think it's wrong so please tell me what is the answer

<section id="news">
  <article>
    <header>
      <h1><a href="item.html">Quisque a dapibus magna, non scelerisque</a></h1>
    </header>
    <img src="http://lorempixel.com/600/300/business/" alt="">
    <p>Etiam massa.</p>
    <p>Dut venenatis.</p>
    <p>Mauroncus lorem eget.</p>
    <footer>
      <span class="author">Dominic Woods</span>
      <span class="tags"><a href="index.html">#politics</a> <a href="index.html">#economy</a></span>
      <span class="date">15m</span>
      <a class="comments" href="item.html#comments">5</a>
    </footer>
  </article>

  <article>
    ......
  </article>

  <article>
    ......
  </article>
</section>

Upvotes: 1

Views: 222

Answers (4)

MD. RONY AHMED
MD. RONY AHMED

Reputation: 78

Try To select like belows and changes the properties of p tag:

section article > p:first-of-type {
 text-align:center;
}

Upvotes: 0

Aditya
Aditya

Reputation: 1329

Try this out

section article > p:first-of-type { background: #121212; color: #fff; }
<section id="news">
  <article>
    <header>
      <h1><a href="item.html">Quisque a dapibus magna, non scelerisque</a></h1>
    </header>
    <img src="http://lorempixel.com/600/300/business/" alt="">
    <p>Etiam massa.</p>
    <p>Dut venenatis.</p>
    <p>Mauroncus lorem eget.</p>
    <footer>
      <span class="author">Dominic Woods</span>
      <span class="tags"><a href="index.html">#politics</a> <a href="index.html">#economy</a></span>
      <span class="date">15m</span>
      <a class="comments" href="item.html#comments">5</a>
    </footer>
  </article>

  <article>
    ......
  </article>

  <article>
    ......
  </article>
</section>

Upvotes: 0

Sarah Gro&#223;
Sarah Gro&#223;

Reputation: 10879

The :first-of-type pseudo class should do exactly what you want:

section article>p:first-of-type {
 outline: solid red 1px;
}
<section id="news">
  <article>
    <header>
      <h1><a href="item.html">Quisque a dapibus magna, non scelerisque</a></h1>
    </header>
    <img src="http://lorempixel.com/600/300/business/" alt="">
    <p>Etiam massa.</p>
    <p>Dut venenatis.</p>
    <p>Mauroncus lorem eget.</p>
    <footer>
      <span class="author">Dominic Woods</span>
      <span class="tags"><a href="index.html">#politics</a> <a href="index.html">#economy</a></span>
      <span class="date">15m</span>
      <a class="comments" href="item.html#comments">5</a>
    </footer>
  </article>

  <article>
    ......
  </article>

  <article>
    ......
  </article>
</section>

While :first-child only matches when the element is truly the first child of its parent element, :first-of-type will match the first occurrence even if there are other elements beforehand.

Upvotes: 2

biberman
biberman

Reputation: 5777

You can solve this with article p:first-of-type

Upvotes: 0

Related Questions