<main>
<h2>Record Wall</h2>
<div class="no-support" data-support="selector-nth-of-s"><p>Your browser does not support fine-grained <code>:nth-child()</code> selections. Please try Safari 9+ or Chrome 111+</p></div>
<ul class="albums">
<li class="sale"><img draggable="false" src="https://assets.codepen.io/89905/coverflow--Odd-World-EP-SMALL-1024x1024.png" width="1200" height="1200" /></li>
<li class="highlight"><img draggable="false" src="https://assets.codepen.io/89905/coverflow--MURGE-ep-cvr-3000x3000-550x550.jpg" width="1200" height="1200" /></li>
<li><img draggable="false" src="https://assets.codepen.io/89905/coverflow--Front-1024x1024.jpg" width="1200" height="1200" /></li>
<li><img draggable="false" src="https://assets.codepen.io/89905/coverflow--Forest-Blue-Pre-LR-1024x1024.png" width="1200" height="1200" /></li>
<li><img draggable="false" src="https://assets.codepen.io/89905/coverflow--Nature-Therapy-Pre-LR-550x550.png" width="1200" height="1200" /></li>
<li class="highlight"><img draggable="false" src="https://assets.codepen.io/89905/coverflow--MOM-Remixes-1024x1024.jpg" width="1200" height="1200" /></li>
<li class="sale"><img draggable="false" src="https://assets.codepen.io/89905/coverflow--ALONE-TOGETHER-remix-V71-550x550.jpg" width="1200" height="1200" /></li>
<li><img draggable="false" src="https://assets.codepen.io/89905/coverflow--Deep-Dive-Ambient-Edits-V8-550x550.jpg" width="1200" height="1200" /></li>
<li class="highlight"><img draggable="false" src="https://assets.codepen.io/89905/coverflow--Alpine-Koresma-x-Aroth-Artwork-550x550.jpg" width="1200" height="1200" /></li>
</ul>
</main>
<footer>
<p>Demo for <a href="https://developer.chrome.com/articles/css-nth-child-of-s" target="_top">https://developer.chrome.com/articles/css-nth-child-of-s</a></p>
</footer>
@layer base, layout;
.highlight:nth-child(2) { /* = Select the element with the class .highlight that is also the 2nd child */
outline: 0.3rem dashed lightgreen;
outline-offset: 0.7rem;
}
:nth-child(2 of .highlight) { /* = Select the 2nd child element that has the class .highlight applied to it */
outline: 0.3rem dashed hotpink;
outline-offset: 0.7rem;
}
@layer layout {
html, body {
background: #333;
color: #fff;
text-align: center;
}
body {
font-family: system-ui,system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}
main {
max-width: 37rem;
margin: 0 auto 3rem;
}
footer {
font-style: italic;
}
footer a {
color: silver;
}
.albums {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
gap: 5rem 2rem;
margin: 2rem 0;
}
.albums li {
position: relative;
transition: scale 0.2s ease-in-out;
}
.albums li:hover {
scale: 1.1;
}
.albums li.sale {
--color: 255 0 0;
}
.albums li.highlight {
--color: 255 215 0;
}
.albums li.sale::before,
.albums li.highlight::before {
padding: 0.1rem 0.5rem 0.1rem 0.5rem;
position: absolute;
top: 1rem;
right: -0.5rem;
display: block;
z-index: 2;
height: 1.5rem;
line-height: 1.5rem;
}
.albums li.sale::after,
.albums li.highlight::after {
content: '';
position: absolute;
top: 2.25rem;
right: -0.5rem;
display: block;
width: 0rem;
height: 0rem;
border-top: 0.5rem solid transparent;
border-bottom: 0.5rem solid transparent;
border-left: 0.5rem solid rgb(var(--color) / 0.6);
z-index: 1;
}
.albums li.highlight::before {
content: 'Staff Pick';
background: rgb(var(--color));
color: black;
}
.albums li.sale::before {
content: 'Sale';
background: rgb(var(--color));
color: white;
}
.albums li img {
display: block;
max-width: 100%;
height: auto;
box-reflect: below 0.1rem
linear-gradient(rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.25));
}
}
/* Non-demo styles below */
@layer base {
@layer reset {
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
html, body {
min-height: 100%;
}
ul[class], ul[class] > li {
list-style: none;
margin: 0;
padding: 0;
}
}
@layer layout {
html {
/* max-width: 84ch; */
padding: 3rem 2rem;
margin: auto;
line-height: 1.5;
font-size: 1.25rem;
}
a,
a:visited {
color: blue;
}
summary {
cursor: pointer;
}
dd + dt {
margin-top: 0.5em;
}
button {
cursor: pointer;
}
}
@layer code {
pre {
border: 1px solid #dedede;
padding: 1em;
background: #f7f7f7;
font-family: "Courier 10 Pitch", Courier, monospace;
overflow-x: auto;
border-left: 0.4em solid cornflowerblue;
tab-size: 4;
}
code:not(:is(pre, .no-support, .has-support) code), output:not(code:has(output) output) {
background: #f7f7f7;
border: 1px solid rgb(0 0 0 / 0.2);
padding: 0.1rem 0.3rem;
margin: 0.1rem 0;
border-radius: 0.2rem;
display: inline-block;
}
}
@layer support {
.no-support,
.has-support {
margin: 1em 0;
padding: 1em;
border: 1px solid #ccc;
}
.no-support {
background-color: #ff00002b;
display: block;
}
.no-support[data-level="warn"] {
background-color: #ffff002b;
}
.has-support {
background-color: #00ff002b;
display: none;
}
:is(.has-support, .no-support) > :first-child {
margin-top: 0;
}
:is(.has-support, .no-support) > :last-child {
margin-bottom: 0;
}
@property --supports-at-property {
syntax: "*";
initial-value: ;
inherits: true;
}
.no-support[data-support="at-property"], [data-no-support="at-property"] {
--value-when-supported: var(--supports-at-property) none;
--value-when-not-supported: block;
display: var(--value-when-supported, var(--value-when-not-supported));
}
.has-support[data-support="at-property"], [data-has-support="at-property"] {
--value-when-supported: var(--supports-at-property) block;
--value-when-not-supported: none;
display: var(--value-when-supported, var(--value-when-not-supported));
}
@supports (transform: scaleX(cos(360deg))) {
.no-support[data-support="css-trig-fns"] {
display: none;
}
.has-support[data-support="css-trig-fns"] {
display: block;
}
}
@supports selector(:nth-child(1 of *)) {
.no-support[data-support="selector-nth-of-s"] {
display: none;
}
.has-support[data-support="selector-nth-of-s"] {
display: block;
}
}
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.