Arthur Plazanet Wiki

Appearance

Pseudo Classes ​

Apply rules based on the number of children a parent has ​

css
/* one item */
li:first-child:nth-last-child(1) {
  /* -or- li:only-child { */
  width: 100%;
}

/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
  width: 50%;
}

/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
  width: 33.3333%;
}

/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
  width: 25%;
}

Source: matthemattics on Stack Overflow

Forms ​

Accessible Forms using :focus-within

:user-valid / :user-invalid