CODEWITHSUNDEEP
csscss-selectors
Schang
Schang

Reputation: 33

CSS how to style only an element in the first instance it appears on a page

Suppose I have to similar articles:

<article>
  <hr>
   <p> This is line 1</p>
   <p> This is line 2</p>
</article>

<article>
<hr>
  <p> This is line 1</p>
  <p> This is line 2</p>
</article>

But I only want styling to affect the FIRST p tag of the very first article and not the first p tag of both articles. I've tried the first child and the first-of-type but in those cases it affects the first p of both articles. Thank you

Upvotes: 0

Views: 432

Answers (2)

Johannes
Johannes

Reputation: 67768

The selector for that would be article:first-child p:first-child { ... } (i.e. first-child p inside first-child article)

You might want to use :first-of-type instead of :first-child, especially for article if there is other content before the first article.

Upvotes: 2

Shiroshan
Shiroshan

Reputation: 43

use first-child pseudo element to article and to p tag

article:first-child p:first-child{
  //your style
}

Upvotes: 0

Related Questions