JSFiddle - React, Tailwind, and code Playground

HTML

<div class="site-main">
    <article id="art-1">1</article><!-- #1 -->
    <aside class="tweet">2</aside><!-- #2 -->
    <article id="art-2"></article>
    <aside class="quote">5</aside><!-- #5 -->
    <section class="ads"></section>
    <aside class="quote">4,5</aside><!-- #4, 5 -->
    <article id="art-3"></article>
    <aside class="tweet"></aside>
    <aside class="quote">5</aside><!-- #5 -->
    <article>3</article><!-- #3 -->
    
    <nav class="site-navigation">1 2 3 4 Next...</nav>
</div>

CSS

aside:first-child { background: black; /* affects nothing */ }
article:last-child { background: black; /* affects nothing */ }
article:first-of-type { background: indianred; /* 1 */ }
aside:first-of-type { background: #66f; /* 2 */ }
aside.quote:first-of-type { background: black; /* nothing */ }
article:last-of-type { background: limegreen; /* 3 */ }
aside:nth-child(3) { background: black; /* nothing */ }
aside:nth-of-type(3) { border-width: 5px; /* 4 */ }
aside.quote:nth-of-type(odd) { border-radius: 50%; /* 5 */ }




/** SETUP CODE */
article, aside, section {
    border: 1px solid black;
    margin-bottom: 1em;
    height: 100px;
    width: 100px;
    font-size: 48px;
    line-height: 100px;
    text-align: center;
}
section {
    width: 100%;
}

JavaScript

/***************

This is a demo of the difference between x-child and x-of-type selectors.

****************/