[css] 선택자 표현식

22 Dec 2023

CSS에서 선택자 표현식은 웹페이지에서 요소를 선택하는 방법을 결정합니다. 선택자 표현식을 사용하여 스타일 규칙을 적용할 요소를 선택할 수 있습니다. 다양한 형식의 선택자 표현식은 웹 개발자가 원하는 정확한 요소를 선택할 수 있도록 도와줍니다.

기본 선택자

요소 선택자는 HTML 요소의 이름을 기반으로 선택합니다.

p {
  color: blue;
}

위의 예제에서 “p”는 <p>로 된 모든 요소를 선택합니다.

클래스 선택자는 HTML 요소에 지정된 클래스 속성을 기반으로 선택합니다.

.blue-text {
  color: blue;
}

위의 예제에서 .blue-text는 class="blue-text"로 지정된 모든 요소를 선택합니다.

ID 선택자는 특정 요소의 ID 속성을 기반으로 선택합니다.

#header {
  font-size: 24px;
}

위의 예제에서 #header는 id="header"로 지정된 요소를 선택합니다.

자식 선택자는 특정 요소의 직계 자식 요소를 선택합니다.

div > p {
  font-weight: bold;
}

위의 예제에서 div > p는 <div> 요소의 직계 자식인 <p> 요소를 선택합니다.

후손 선택자는 특정 요소의 모든 하위 요소를 선택합니다.

div p {
  text-decoration: underline;
}

위의 예제에서 div p는 <div> 요소의 모든 하위 <p> 요소를 선택합니다.

형제 선택자는 특정 요소의 동위 형제 요소를 선택합니다.

h2 + p {
  margin-top: 20px;
}

위의 예제에서 h2 + p는 <h2> 요소의 바로 뒤에 오는 <p> 요소를 선택합니다.

여러 선택자를 결합하여 특정 요소를 선택할 수 있습니다.

h1, h2, h3 {
  color: red;
}

위의 예제에서 h1, h2, h3는 <h1>, <h2>, <h3> 요소를 모두 선택하여 스타일을 적용합니다.

이러한 선택자 표현식을 활용하여 웹페이지의 다양한 요소들을 선택하여 스타일을 적용할 수 있습니다. CSS 선택자에 대한 더 자세한 정보는 MDN 웹 문서를 참조하세요.