CSS 선택자는 HTML 요소를 스타일링하기 위해 사용됩니다. 선택자를 사용하여 특정 요소를 선택하고 그에 대한 스타일을 정의할 수 있습니다. 이 포스트에서는 CSS 선택자를 생성하는 방법에 대해 알아보겠습니다.

기본 선택자

기본 선택자로는 요소 선택자, 클래스 선택자, ID 선택자, 전체 선택자 등이 있습니다.

요소 선택자

p {
  color: blue;
}

클래스 선택자

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

ID 선택자

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

전체 선택자

* {
  margin: 0;
  padding: 0;
}

결합된 선택자

여러 선택자를 결합하여 더 구체적인 규칙을 정의할 수 있습니다.

후손 결합 선택자

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

자식 결합 선택자

nav > ul {
  display: flex;
}

인접 형제 선택자

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

가상 클래스와 가상 요소 선택자

가상 클래스와 가상 요소 선택자는 특정 상태나 위치에 있는 요소를 선택할 수 있습니다.

a:hover {
  text-decoration: underline;
}

p::first-line {
  font-weight: bold;
}

속성 선택자

특정 속성의 값을 기반으로 요소를 선택할 수 있습니다.

input[type="text"] {
  border: 1px solid #ccc;
}

이렇게 다양한 선택자를 활용하여 웹 페이지의 요소들을 정확하게 선택하고 스타일링할 수 있습니다.

참고 자료: MDN Web Docs