CSS Selector / :where(), :is()

:where()

사용법1

button:focus,
button:hover,
button:active {
  background: blue;
}

/* 아래와 같이 간결하게 작성 가능 */
button:where(:focus, :hover, :active) {
  background: blue;
}

사용법2

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  appearance: none;
  cursor: pointer;
  margin: 0;
  border: none;
  border-radius: 1em;
  padding: 0.5em 1em;
  color: white;
  font-weight: bold;
  background: royalblue;
}

/* 아래와 같이 여러 요소에 동일한 스타일 적용 가능 */
:where(button, input[type="button"], input[type="reset"], input[type="submit"]) {
  appearance: none;
  cursor: pointer;
  margin: 0;
  border: none;
  border-radius: 1em;
  padding: 0.5em 1em;
  color: white;
  font-weight: bold;
  background: royalblue;
}

사용법3

button:focus,
button:hover,
button:active,
input[type="button"]:focus,
input[type="button"]:hover,
input[type="button"]:active,
input[type="reset"]:focus,
input[type="reset"]:hover,
input[type="reset"]:active,
input[type="submit"]:focus,
input[type="submit"]:hover,
input[type="submit"]:active {
  background: blue;
}

/* 필요한 선택자를 많이 줄일 수 있다. */
:where(button, input[type="button"], input[type="reset"], input[type="submit"]):where(:focus, :hover, :active) {
  background: blue;
}

:is() 차이점

:where() 함수는 CSS 명시도가 0이라서, **:where()이 사용된 CSS 규칙은 다른 선택자를 통해서 덮어쓰기가 용이하다.**

:is() 는 CSS 명시도는 인자로 넘어온 선택자 중에서 가장 명시도가 큰 것이 되기 때문에 다른 선택자로 덮어쓰기를 방지하고자 할 때 더 적합

reference