JSFiddle - React, Tailwind, and code Playground

by Mladen Petrovic

HTML

<h3>nth-child Example</h3>
<div>
    <a href="#" class="media-link-ex1" style="display: block">Jane Smith</a>
    <a href="#" class="media-link-ex1" style="display: block">John Smith</a>
</div>
<br />
<br />
<div>
    <input type="hidden" value="This throws off the selector despite not having the media-link-ex1 class." />
    <a href="#" class="media-link-ex1" style="display: block">Jane Smith</a>
    <a href="#" class="media-link-ex1" style="display: block">John Smith</a>
</div>
<br />
<br />
<div>
    <input type="hidden" value="This input throws off the selector despite not having the media-link-ex1 class." />
    <input type="hidden" value="This input throws off the selector despite not having the media-link-ex1 class." />
    <a href="#" class="media-link-ex1" style="display: block">Jane Smith</a>
    <a href="#" class="media-link-ex1" style="display: block">John Smith</a>
</div>
<br />

<h3>nth-of-type Example</h3>
<div>
    <a href="#" class="media-link-ex2" style="display: block">Jane Smith</a>
    <a href="#" class="media-link-ex2" style="display: block">John Smith</a>
</div>
<br />
<br />
<div>
    <a href="#" value="This throws off the selector despite not having the media-link-ex2 class."></a>
    <a href="#" class="media-link-ex2" style="display: block">Jane Smith</a>
    <a href="#" class="media-link-ex2" style="display: block">John Smith</a>
</div>
<br />
<br />
<div>
    <a href="#" value="This throws off the selector despite not having the media-link-ex2 class."></a>
    <a href="#" value="This throws off the selector despite not having the media-link-ex2 class."></a>
    <a href="#" class="media-link-ex2" style="display: block">Jane Smith</a>
    <a href="#" class="media-link-ex2" style="display: block">John Smith</a>
</div>

CSS

.media-link-ex1:nth-child(2) {
    font-weight: bold;
}

.media-link-ex2:nth-of-type(2) {
    font-weight: bold;
        font-size: 55px;

}