Cascading Styles pt. 2

.form-action--submit { /* … */ }
form button[type=submit] { /* … */ }

[id="example"] {
  /* ID selector, class specificity */
}

a:is(body.home #logo) { /* … */ }
a:where(body.home #logo) { /* … */ }

/* (a) AND ALSO (nav .active) */
a:where(nav .active) { color: black; }
a:is(nav .active) { color: black; }

/* (h1 a) AND ALSO (main > *) */
h1 a:where(main > *) { color: black; }
h1 a:is(main > *) { color: black; }

h1 a:hover, h1 a:focus,
h2 a:hover, h2 a:focus,
h3 a:hover, h3 a:focus,
h4 a:hover, h4 a:focus,
h5 a:hover, h5 a:focus {
  text-decoration: underline;
}

/* (h1 OR h2 OR …) AND (a:hover OR a:focus) */
:is(h1, h2, h3, h4, h5) a:where(:hover, :focus) {
  text-decoration: underline;
}

table[rules=cols i] > tfoot > tr > td,
table[rules=cols i] > tfoot > tr > th,
table[rules=all i] > tfoot > tr > td,
table[rules=all i] > tfoot > tr > th {
  /* … */
}

table:where(
  [rules=cols i], [rules=cols i]
) > tfoot > tr > :is(th, td) { /* … */ }

a { color: blue; }
a:hover { color: rebeccapurple; }
nav a.active { color: black; }

/* nav a.active { 0,1,2 } */
nav a:where(.active) { /* 0,0,2 */ }
a:where(nav .active) { /* 0,0,1 */ }

:is(a, .b, #c .d) { /* 1,1,0 */ }
a:is(.b, #c .d) { /* 1,1,1 */ }

a:where(#logo, .sponsor .logo) {
  /* specificity: 0,0,1 */
}

a:is(#logo, .sponsor .logo) {
  /* specificity: 1,0,1 */
}

/* (p) UNLESS (.warning)  */
p:not(.warning) { /* … */ }

form:has(:focus) { /* form:focus-within */ }
button:has(svg) { /* icon button */ }
.card:has(> figure:first-child) { /* image card */ }
.card:not(:has(img)) { /* card without image */ }
input:has(+ .error) { /* input followed by error */ }

article:has(h1, .title) a {
  color: red;
}

article h1 a {
  color: green;
}

button, .btn {
  background: rebeccapurple;
  color: white;
}

button, .btn {
  background: rebeccapurple;
  color: white;

  &:focus,
  &:hover,
  &:active {
    background: teal;
  }
}

button, .btn { /* … */ }

:is(button, .btn):focus,
:is(button, .btn):hover,
:is(button, .btn):active { /* … */ }

ol, ul {
  > p { /* :is(ol, ul) > p */ }
  .sidebar & { /* .sidebar :is(ol, ul) */ }
}

.card {
  @layer defaults {
    display: flex;
  }

  @layer variations {
    @media (min-width: 30em) {
      display: grid;
     }
  }
}

ol, ul {
  li { /* … */ }
  nav & { /* … */ }
}

ol, ul {
  & li { /* … */ }
  :is(nav) & { /* … */ }
}

.light-theme a { color: purple; }
.dark-theme a { color: plum; }

@scope (.light-theme) {
  a { /* similar to simple nesting… */ }
}
@scope (.dark-theme) {
  a { /* but the _closer_ scope root wins… */ }
}

.title { /* global */ }
.post .title { /* nested */ }

.post__title { /* BEM */ }

.post__title { /* BEM */ }
.title[data-JKGHJ] { /* Vue */ }

@scope (.media) to (.content) {
  img { /* only images that are "in scope" */ }
}

<article>
  <style scoped>
    p { color: green; } 
  </style>
  <p>This paragraph will be green.</p>
</article>

<p>This paragraph won't!</p>

<article>
  <style>
    @scope {
      p { color: green; } 
    }
  </style>
  <p>This paragraph will be green.</p>
</article>

<p>This paragraph won't!</p>

.resilient {
  color: green;
  color: color(display-p3 0 1 0);
}