<main id="main">
<article>
<h1>Headline</h1>
<img src='https://images.unsplash.com/photo-1616836598375-8f73411bff2c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxODE4OTYzOA&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure veniam earum eveniet dolores quis vero vitae eum quas hic ducimus doloribus voluptatibus temporibus laboriosam fugiat ex in, vel mollitia sint!</p>
</article>
</main>
:where(article img:not(:first-child)) {
border: 5px solid red;
}
:where(article) img {
border: 5px solid green;
}
img {
border: 5px solid orange;
}
/*The following increases specificity even more
and would be the true winner of this group
if uncommented */
/* :where(article) img:not(:first-child) {
border: 2px solid purple;
} */
main {
width: min(60ch, 100vw - 2rem);
margin: 5vh auto;
}
article {
text-align: center;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.