CSS 선택기

CSS 선택자는 무엇입니까?

CSS 선택기는 스타일을 지정할 HTML 요소를 "찾는"(또는 선택하는) 데 사용됩니다.

CSS 선택자를 다섯 가지 범주로 나눌 수 있습니다.

-간단한 선택기(이름, ID, 클래스를 기준으로 요소 선택)



기본 선택자

요소/ID/클래스를 선택합니다. 또한 가장 자주 사용되며 기억하기 쉽습니다.

ID 선택기: id 주어진 요소를 선택합니다.

<div id="app">
  <div class="container">
    <p class="hello">Hello</p>
  </div>
</div>

요소 선택기: element_name 주어진 요소를 선택합니다.

p { color: blue; }
div { color: magenta; }

클래스 선택기: .class 주어진 클래스 이름을 포함하는 모든 요소를 ​​선택합니다.

.hello {
  color: red;
}

ID 선택기: #id 주어진 HTML ID를 포함하는 요소를 선택합니다.

#app {
  color: red;
}

범용 선택기: * 모든 요소를 ​​선택합니다.

* {
  color: yellow;
}

CSS 그룹화 선택기

그룹화 선택기는 스타일 정의가 동일한 모든 HTML 요소를 선택합니다.

다음 CSS 코드를 살펴보십시오(h1, h2 및 p 요소에는 동일한 스타일 정의가 있음).

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

속성 선택자:

이 선택자 그룹은 요소에 있는 특정 특성의 존재 여부에 따라 요소를 선택하는 다양한 방법을 제공합니다.

a[href="https://example.com"]
{
}

이 블로그가 CSS 선택자를 이해하는 데 도움이 되기를 바랍니다.