JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<div class="entry-content">

    <p>p:first-of-type</p>
    <p>p</p>

    <ul>
        <li>li</li>
        <li><p>li p:first-of-type</p></li>
        <li><p>li p</p></li>
    </ul>
    
    <blockquote>
        blockquote
    </blockquote>

    <blockquote>
        <p>blockquote p:first-of-type</p>
        <p>blockquote p</p>
    </blockquote>   
    
</div>

SCSS

* { margin: 0; padding: 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box; }
body {
    max-width: 480px;
    width: 90%;
    margin: 3em auto;
    font: 120%/1.6 sans-serif; }

.entry-content > p:first-of-type {
    color: green; }
ul li {
    color: red; }   
ul li p  { 
    color: #000; }
blockquote { 
    color: blue; }
blockquote p { 
    color: purple; }

JavaScript

// > :first-of-type pseudo selectors.