Working with CSS3's General sibling combinator.

HTML
<section></section>
<section class="target"></section>
<section class="target"></section>
<section class="target"></section>
<section></section>
CSS
section.target:first-of-type {}
section.target:nth-of-type(1) {}
section.target:first-child {}

Using the General sibling combinator

HTML
<section></section>
<section class="target"></section>
<section class="target"></section>
<section class="target"></section>
<section></section>
CSS
body > section.target { border: 1px solid red; }
body > section.target ~ section.target { border: none; }

Front-End & WordPress Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Michael Weaver

Michael Weaver

Front-End & WordPress Developer

More from Medium

GoStudent — The World’s First European EdTech Unicorn

X-ENDER ECOSYSTEM

Gender Gap in the Blockchain and NFT Industry

A Quick Take on Whitelists Today