<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.