<nav>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</nav>
<main>
<article>
<h2>Article Headline Level 2</h2>
<p>Lorem ipsum dolor sit amet consectetur <a href="">adipisicing elit</a>. Ullam voluptate doloremque officia quidem molestias maiores numquam assumenda perspiciatis similique odio eligendi aliquid, sapiente voluptatibus nesciunt quasi adipisci minima blanditiis odit!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, praesentium? Reiciendis, animi quaerat quas quam accusantium nesciunt <a href="">ipsa consectetur modi harum</a> voluptate! Eius architecto maiores aspernatur repellendus. Necessitatibus, vitae harum!</p>
<img src='https://images.unsplash.com/photo-1616696068617-2f85a2a19226?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxODE5Nzg2OQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti soluta praesentium quo consequatur <a href="">temporibus tenetur nemo</a>, nulla excepturi distinctio, omnis adipisci rem aperiam sit dolorem maxime deleniti voluptatibus, officia voluptatem?</p>
<h3>Article Headline Level 3</h3>
<img src='https://source.unsplash.com/600x200/?mountains' alt=''>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio quisquam illum totam delectus perspiciatis labore, dignissimos autem tempore vitae officiis mollitia cupiditate hic. Exercitationem eius ipsam similique dicta, consequatur nam.</p>
</article>
</main>
<footer>
<p><a href="">Acme Corp</a></p>
</footer>
nav a {
color: inherit;
text-decoration: none;
}
/*
The `*` references the base `a` selector
*/
a:not(nav *) {
color: blue;
}
/* Chain `:not()` and `:is()` for succinct, powerful selectors */
img:not(:is(h2, h3) + *) {
margin-top: 8vh;
margin-bottom: 8vh;
transform: scale(1.1);
}
main,
footer p {
width: min(60ch, 100vw - 2rem);
margin-left: auto;
margin-right: auto;
}
main {
margin-top: 5vh;
margin-bottom: 5vh;
}
nav {
background-color: lavender;
padding: 1rem;
}
nav ul {
display: grid;
grid-auto-flow: column;
justify-content: center;
grid-gap: 2rem;
list-style: none;
margin: 0;
}
footer {
background-color: whitesmoke;
padding: 8px 0;
}
p {
line-height: 1.5;
}
img {
width: 100%;
display: block;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.