/* Descendant (space) — any nested depth */
article p { color: #ccc; }
/* Matches: <article><div><p> (any depth) */

/* Child (>) — direct children only */
ul > li { list-style: none; }
/* Matches: <ul><li> but NOT <ul><ol><li> */

/* Adjacent sibling (+) — immediately next */
h2 + p { margin-top: 0; }
/* Matches the first <p> right after <h2> */

/* General sibling (~) — any following sibling */
h2 ~ p { font-size: 0.95rem; }
/* Matches ALL <p> siblings after the <h2> */

/* Has the attribute (any value) */
[title]       { cursor: help; }

/* Exact match */
[type="email"] { border-color: #667eea; }

/* Starts with (^=) */
[href^="https"] { color: #43e97b; }

/* Ends with ($=) */
[href$=".pdf"]  { color: #f5576c; }

/* Contains (*=) */
[class*="btn"]  { cursor: pointer; }

/* Case-insensitive flag (i) */
[href$=".PDF" i] { color: #f5576c; }

/* Whitespace-separated word match (~=) */
[class~="active"] { font-weight: bold; }

/* Starts with value or value- (|=) for lang attributes */
[lang|="en"] { quotes: "\201C" "\201D"; }

/* Without :is() — repetitive */
header a:hover,
nav a:hover,
footer a:hover {
  color: #667eea;
}

/* With :is() — clean! */
:is(header, nav, footer) a:hover {
  color: #667eea;
}

/* Works nested too */
article :is(h1, h2, h3) {
  font-weight: 700;
  line-height: 1.2;
}

/* Combining with other selectors */
.card :is(img, video, picture) {
  border-radius: 8px;
  width: 100%;
}

/* :where() has zero specificity — easily overridden */
:where(article, section, aside) p {
  line-height: 1.7;
  color: #b0b0c0;
}

/* This single class easily overrides the :where rule */
.highlight {
  color: #f5576c;   /* wins because :where = 0 specificity */
}

/* Great for CSS resets */
:where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* vs :is() comparison */
:is(article, section) p { }   /* specificity: 0-0-2 (element + element) */
:where(article, section) p { } /* specificity: 0-0-1 (only p counts) */

/* Card with image gets different layout */
.card:has(img) {
  grid-template-rows: auto 1fr;
}

/* Card without image */
.card:not(:has(img)) {
  padding: 2rem;
}

/* Form validation — label color based on input state */
label:has(+ input:invalid) {
  color: #f5576c;
}

label:has(+ input:valid) {
  color: #43e97b;
}

/* Style parent based on child hover */
.nav:has(a:hover) {
  background: rgba(102,126,234,0.1);
}

/* Page has a specific element */
body:has(.modal.open) {
  overflow: hidden;
}

/* All paragraphs except .intro */
p:not(.intro) {
  font-size: 0.95rem;
}

/* All links except those with .no-style */
a:not(.no-style) {
  text-decoration: underline;
  color: #667eea;
}

/* All inputs except submit and reset */
input:not([type="submit"]):not([type="reset"]) {
  border: 1px solid #ccc;
  padding: 0.5rem;
}

/* Modern: comma-separated list in :not() */
:not(h1, h2, h3, h4, h5, h6) {
  /* matches everything except headings */
}

/* Last child without border */
li:not(:last-child) {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Element + class */
a.primary { color: #667eea; }

/* Element + attribute */
input[required] { border-left: 3px solid #f5576c; }

/* Multiple classes */
.btn.primary.large { font-size: 1.2rem; }

/* Class + pseudo-class */
.card:hover:not(.disabled) {
  transform: translateY(-4px);
}

/* Element + multiple pseudo-classes */
li:first-child:last-child {
  /* only child (when there's exactly one li) */
  border-radius: 8px;
}

/*  Specificity:  (ID - CLASS - ELEMENT)  */

p                      /* 0-0-1 */
.card                  /* 0-1-0 */
#hero                  /* 1-0-0 */
p.intro                /* 0-1-1 */
#hero .title           /* 1-1-0 */
div#hero p.intro       /* 1-1-2 */
.card .title a:hover   /* 0-2-1  (:hover = class-level) */
[type="email"]         /* 0-1-0  (attributes = class-level) */
::before               /* 0-0-1  (pseudo-elements = element-level) */

/* :is() takes the highest specificity in its list */
:is(.card, #hero) p    /* 1-0-1  (#hero is highest) */

/* :where() is always zero */
:where(.card, #hero) p /* 0-0-1  (:where = 0 specificity) */

/* :not() and :has() use the specificity of their argument */
p:not(.intro)          /* 0-1-1  (.intro contributes class-level) */
.card:has(img)         /* 0-1-1  */

/* SLOWER: browser finds ALL p, then checks ancestors */
body div.container ul li a p { }

/* FASTER: browser finds .card-title directly */
.card-title { }

/* Performance ranking (fastest to slowest):
   1. ID           #hero
   2. Class        .card
   3. Element      p
   4. Attribute    [type]
   5. Universal    *
   6. Combinators  .a .b > .c
*/

/* Native CSS Nesting */
.card {
  padding: 1.5rem;
  border-radius: 12px;

  /* Nested child selector */
  & .title {
    font-size: 1.2rem;
    font-weight: 700;
  }

  /* Nested pseudo-class */
  &:hover {
    transform: translateY(-4px);
  }

  /* Nested pseudo-element */
  &::after {
    content: "";
  }

  /* & at the end — parent becomes qualifier */
  .dark-theme & {
    background: #1a1a2e;
    /* Compiles to: .dark-theme .card */
  }

  /* Nested media query */
  @media (width < 768px) {
    padding: 1rem;
  }
}

/* Deeply nested */
.nav {
  & .menu {
    & .item {
      &:hover {
        color: #667eea;
        /* Result: .nav .menu .item:hover */
      }
    }
  }
}