v150 · CSS · Media

Playlist UI

A complete playlist UI where the active track's row, album art, and number indicator are all styled via audio:playing + .track-row — zero JavaScript for the visual state changes. Click any track, then hit Play.

Checking :playing pseudo-class support…

demo

Now Playing

Select a track

🔊

Play a track to see which CSS rule is active…

code

/*
  DOM: each <audio> is an immediate sibling before its .track-row.
  The :playing pseudo-class drives all visual state — no JS needed.
*/

/* Highlight the active row */
audio:playing + .track-row {
  background: color-mix(in srgb, var(--accent-blue) 10%, var(--bg-paper));
}

/* Replace track number with a note icon */
audio:playing + .track-row .track-num {
  font-size: 0; /* hide number */
}
audio:playing + .track-row .track-num::after {
  content: '♫';
  color: var(--accent-blue);
  animation: spin-note 2s linear infinite;
}

/* Pulse the album art */
audio:playing + .track-row .track-art {
  animation: art-pulse 1.8s ease-in-out infinite;
  border-color: var(--text-black);
}

/* Show muted badge on track name */
audio:muted + .track-row .track-name::after {
  content: ' 🔇';
}

/* You can also use :paused to dim other tracks */
/* audio:paused + .track-row { opacity: 0.6; } */

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗

demo

code

see also

implementation reference