> For the complete documentation index, see [llms.txt](https://adam-37.gitbook.io/joomadeung/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://adam-37.gitbook.io/joomadeung/html-css-scss/html-css-scss/css-selector-where-is.md).

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

#### `:where()`

사용법1

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

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

사용법2

```css
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

```css
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](https://www.daleseo.com/css-where/)