Pseudo-classes and Elements

a:hover   { color: blue; }
li:first-child { font-weight: bold; }
input:focus { outline: 2px solid blue; }

a:link    { color: blue; }
a:visited { color: purple; }
a:hover   { text-decoration: underline; }
a:active  { color: red; }
/* LVHA order matters! */

button:focus-visible { outline: 3px solid blue; outline-offset: 2px; }
input:focus-within { box-shadow: 0 0 0 3px rgba(59,130,246,0.3); }
:target { scroll-margin-top: 5rem; }

input:valid   { border-color: green; }
input:invalid { border-color: red; }
input:placeholder-shown { font-style: italic; }
input:required::placeholder::after { content: " *"; }  /* not possible — use label */
:disabled { opacity: 0.5; cursor: not-allowed; }
input:autofill { background: lightyellow !important; }

li:first-child { border-top: none; }
li:last-child  { border-bottom: none; }
tr:nth-child(even) { background: #f9f9f9; }
tr:nth-child(odd)  { background: #fff; }
p:nth-of-type(2)   { color: gray; }
div:empty { display: none; }

/* CSS Selectors 4: nth-child with selector list */
:nth-child(even of .item) { background: #f0f0f0; }

/* :is() */
:is(h1, h2, h3) { font-weight: 600; }
:is(article, section) > p { margin-top: 0; }

/* :where() — zero specificity, easy to override */
:where(header, footer) a { color: inherit; }

/* :not() */
a:not([href]) { color: gray; }
:not(h1):not(h2) { font-size: 1rem; }

/* :has() — "parent selector" */
form:has(:invalid) { border: 1px solid red; }
li:has(> a:hover) { background: #f0f0f0; }
h2:has(+ p) { margin-bottom: 0.25rem; }
.card:has(img) { padding: 0; }
article:not(:has(h2)) { display: none; }

@page :first { margin-top: 4cm; }
@page :left  { margin-left: 3cm; }
@page :right { margin-right: 3cm; }

:lang(en)    { quotes: '"' '"'; }
:lang(fr)    { quotes: '«' '»'; }
:dir(ltr)    { text-align: left; }
:dir(rtl)    { text-align: right; }

:fullscreen         { background: black; }
:-webkit-full-screen { background: black; }
:modal              { background: white; box-shadow: 0 0 0 100vmax rgba(0,0,0,0.5); }
:picture-in-picture { opacity: 0.5; }

:defined     { /* elements that have been defined (custom elements) */ }
:host        { /* shadow host from within shadow DOM */ }
:host(.open) { /* host with .open class */ }
:host-context(.dark) { color: white; } /* host inside .dark ancestor */
:global(.cls) { /* escape local scope in CSS Modules */ }
:local(.cls)  { /* CSS Modules local scope */ }
:playing      { /* media element currently playing */ }
:paused       { /* media element paused */ }
:seeking      { /* media element seeking */ }
:muted        { /* media element muted */ }
:volume-locked { /* media volume locked */ }
:open         { /* <details> or <select> that is open */ }
:popover-open { /* popover in open state */ }

.item::before { content: "→ "; }
p::first-line { font-weight: bold; }
::selection   { background: #b3d4fc; }

.required::after {
  content: " *";
  color: red;
}

.quote::before { content: open-quote; }
.quote::after  { content: close-quote; }

/* Decorative line */
.section-title::after {
  content: "";
  display: block;
  height: 2px;
  background: currentColor;
  margin-top: 0.5rem;
}

/* Clearfix */
.group::after {
  content: "";
  display: table;
  clear: both;
}

content: "";                          /* empty string — required for display */
content: "text";
content: attr(data-label);           /* attribute value */
content: url("/icon.svg");           /* image */
content: open-quote;
content: close-quote;
content: no-open-quote;
content: counter(section);          /* counter value */
content: counters(item, ".");
content: " (" attr(href) ")";       /* combine strings */
content: none;                       /* suppress inherited ::before/::after */
content: normal;                     /* as if not specified */

p::first-line {
  font-weight: bold;
  text-transform: uppercase;
}

p::first-letter {
  font-size: 3em;
  float: left;
  margin-right: 0.1em;
  line-height: 1;
}
/* Only font, color, background, text decoration, margin, padding, border, float,
   line-height, word-spacing, letter-spacing, text-transform are allowed */

::selection {
  background: #b3d4fc;
  color: #000;
  /* Only color, background, text-shadow, text-decoration allowed */
}
::selection { text-shadow: none; }

li::marker {
  color: teal;
  content: "▸ ";
  font-size: 0.75em;
}
summary::marker { content: ""; } /* hide default triangle */
summary::-webkit-details-marker { display: none; }

input::placeholder {
  color: #9ca3af;
  font-style: italic;
  opacity: 1;   /* Firefox sets 0.54 by default */
}

/* Behind dialog, fullscreen, popover */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}
:fullscreen::backdrop { background: black; }

input[type="file"]::file-selector-button {
  padding: 0.4rem 0.8rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f0f0f0;
  cursor: pointer;
}

/* WebVTT captions */
video::cue        { background: rgba(0,0,0,0.8); color: white; }
video::cue(b)     { font-weight: bold; }
video::cue(.warning) { color: yellow; }

/* Target named parts exported by a custom element */
my-element::part(button) { background: blue; }
my-element::part(icon)   { width: 1em; }

/* Slotted content in shadow DOM */
::slotted(p)   { margin: 0; }
::slotted(.highlighted) { background: yellow; }

/* Limited support — browser-controlled */
::spelling-error { text-decoration: wavy red underline; }
::grammar-error  { text-decoration: wavy green underline; }

.btn {
  background: blue;

  &:hover { background: darkblue; }
  &:focus-visible { outline: 3px solid blue; }
  &:disabled { opacity: 0.5; }
  &:is(:hover, :focus) { color: white; }
  &::before { content: "→ "; }
}