Peudo Element/Class Selector

            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)