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

/*- unrelated ----------*/
* { margin: 0; padding: 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box; }
html { 
    background: #fafbfc; }

body {
    max-width: 960px;
    width: 90%;
    margin: 3em auto;
    font-family: sans-serif; 
    line-height: 1.5;
    font-size: 75%; }

/*- example code ----------*/
body { color: orange; }

.entry-content > p:first-of-type {
    color: black; }

ul li {
    color: red; }   
ul li p  { 
    color: green; }
blockquote { 
    color: blue; }
blockquote p { 
    color: purple; }

/*- unrelated ----------*/
@media screen and (min-width: 481px) {   
    html { 
        font-size: 87.5%; } }
@media screen and (min-width: 650px) {   
    html { 
        font-size: 100%; }
    body {
        line-height: 1.6; } }
@media screen and (min-width: 800px) {   
    html { 
        font-size: 125%; }
    body {
        line-height: 1.8; } }

JavaScript

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