article1 - p
article1 - section - p
CSS: <style> p { color: blue; font-size: 20px; } #article1 p { color: red; font-size: 20px; } /* pseudo-element, , first letter of every p in artcle2 */ #article2 p::first-letter { font-size: 3em; vertical-align: -5px; } /* pseudo-class, p in article3, where p is the first child of his parent */ #article3 p:first-child { color: green; font-size: 20px; } </style>
Result:
article1 - p
article1 - section - p
article2 - p
article3 - p (first child of article)
article3 - section - p (first child of section)
article3 - section - p (second child of section)