<main class="parent">
<!-- .sister immediately after .brother -->
<div class="brother"><code>.brother</code></div>
<div class="sister"><code>.sister</code></div>
<!-- .sister immediately after .brother -->
<div class="brother"><code>.brother</code></div>
<div class="sister"><code>.sister</code></div>
<!-- .sister immediately after .sister -->
<div class="sister"><code>.sister</code></div>
<div class="brother"><code>.brother</code></div>
<!-- .cousin immediately after .brother -->
<div class="cousin">
<!-- .sister contained in a .cousin -->
<code>.cousin</code>
<div class="sister"><code>.sister</code></div>
</div>
</main>
/* Select all div elements */
div {
background: hsl(0 0% 0% / .5);
border: 1px solid white;
color: white;
place-items: center;
padding-block: 1rem;
padding-inline: 1.5rem;
position: relative;
width: 100%;
}
/* Selects all .brother elements */
.brother {
background-color: hsl(25 100% 50%);
}
@layer base {
html {
background-color: #262626;
background-position: top center;
background-repeat: no-repeat;
background-image:
radial-gradient(50% 50% at top center, rgb(0 0 0 / 0.66), #262626),
linear-gradient(180deg, #fff, #262626);
background-size: 120% 2000px, 100% 2000px;
}
body {
display: grid;
font-size: 1.5rem;
gap: 1.5rem;
font-family: Merriweather, serif;
padding: 1ch;
}
main {
display: grid;
gap: 1rem;
}
div > div {
inset-block-start: 1rem;
inset-inline-start 100vw;
position: absolute;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.