CSS 선택자는 HTML 요소에 스타일을 적용하는 데 사용됩니다. 올바른 선택자를 사용하면 코드의 유지 보수가 쉬워지고, 스타일을 정확하게 타겟팅할 수 있습니다. 여기에 몇 가지 추천하는 CSS 선택자를 소개하겠습니다.

1. 클래스 선택자

클래스 선택자는 동일한 스타일을 여러 요소에 적용하고 싶을 때 유용합니다. 요소의 클래스를 식별하여 스타일을 적용할 수 있습니다.

.button {
  font-size: 16px;
  color: #ffffff;
  background-color: #007bff;
  border: 1px solid #007bff;
  border-radius: 4px;
}

2. 자식 선택자

자식 선택자는 특정 요소의 자식으로서 스타일을 적용하고 싶을 때 사용됩니다.

.container > p {
  font-size: 14px;
  color: #333333;
}

3. 가상 선택자

가상 선택자는 마우스 호버나 요소의 상태에 따라 스타일을 적용할 수 있습니다.

a:hover {
  color: #ff0000;
}

input:valid {
  box-shadow: 0 0 5px #2ecc71;
}

결론

올바른 CSS 선택자를 사용하면 코드를 더 깔끔하게 유지할 수 있고, 스타일을 더 정확하게 조절할 수 있습니다. 이러한 선택자를 잘 활용하여 효율적인 CSS를 작성하세요.

참고 자료: MDN Web Docs