CSS는 HTML 요소에 스타일을 적용하기 위한 선택자를 사용합니다. 이때, 선택자를 사용하여 특정한 HTML 요소를 선택하여 스타일을 적용할 수 있습니다. 여러 가지 선택자 중에서 자주 사용되는 몇 가지 선택자를 비교해보겠습니다.

기본 선택자

요소 선택자

p {
  color: blue;
}

위의 코드는 <p> 요소를 선택하여 텍스트 색상을 파란색으로 지정합니다.

클래스 선택자

.my-class {
  font-size: 16px;
}

위의 코드는 class="my-class" 속성을 가진 모든 요소를 선택하여 글꼴 크기를 16px로 지정합니다.

ID 선택자

#my-id {
  background-color: yellow;
}

위의 코드는 id="my-id" 속성을 가진 요소를 선택하여 배경색을 노란색으로 지정합니다.

복합 선택자

자식 선택자

ul > li {
  list-style-type: square;
}

위의 코드는 <ul> 요소의 자식인 <li> 요소를 선택하여 목록 스타일을 사각형으로 지정합니다.

후손 선택자

div p {
  line-height: 1.5;
}

위의 코드는 <div> 요소 내에 포함된 모든 <p> 요소를 선택하여 줄 간격을 1.5로 지정합니다.

인접 형제 선택자

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

위의 코드는 <h2> 요소 다음에 바로 인접한 <p> 요소를 선택하여 위쪽 여백을 20px로 지정합니다.

이렇게 다양한 선택자를 적절히 활용하여 HTML 요소에 스타일을 적용할 수 있습니다.

참고 자료:

• MDN web docs - CSS 선택자