How to select the first appearance of an element in an entire document using CSS

Question

This question puzzled me

Say we have a structure like this

<!-- Elements can be dynamic --> <div> <section> </section> <section> <p>1st Para</p> </section> <section> <p>2nd Para</p> </section> <section> </section> </div> 

Now in this case, how to select only the 1st instance of the p element?

Note. Partitions can be dynamic, therefore

 div section:nth-of-type(2) p { /* This won't work */ } 

Answer 1

This is not possible using only CSS. You mentioned that elements are dynamically generated, if so, then I programmatically put the class in the first <p> and targeted it that way.

By doing this, you will also ensure compatibility between browsers; because if possible, you would definitely need to use CSS3 pseudo-classes.

Answer 2

use p:first , p:second and it will work as a class, but you do not need to add .anyclass to yout html tag. Hope this helps.