CSS(Cascading Style Sheets)는 웹 페이지의 스타일과 레이아웃을 지정하기 위한 스타일 시트 언어입니다. CSS 선택자는 특정 요소에 스타일을 적용하기 위해 사용됩니다. 다양한 선택자를 활용하여 원하는 요소를 정확하게 선택하고 스타일을 적용할 수 있습니다.

기본 선택자

기본 선택자는 요소의 태그 이름, 클래스, ID 등을 사용하여 요소를 선택합니다. 예를 들어:

p {
  color: blue;
}

.myClass {
  font-size: 20px;
}

#myId {
  background-color: yellow;
}

조합 선택자

여러 요소를 한꺼번에 선택하기 위해 조합 선택자를 사용할 수 있습니다. 일반적으로 자식 요소, 후손 요소, 형제 요소 등을 선택하는데 활용됩니다. 예를 들어:

div p {
  font-weight: bold;
}

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

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

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

가상 클래스와 가상 요소 선택자는 특정 상태나 위치에 있는 요소를 선택하는 데 사용됩니다. 예를 들어:

a:link {
  text-decoration: none;
}

input:checked {
  background-color: lightgreen;
}

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

속성 선택자

특정 속성을 가진 요소를 선택하기 위해 속성 선택자를 활용할 수 있습니다. 예를 들어:

input[type="text"] {
  width: 200px;
}

p[class~="important"] {
  color: red;
}

CSS 선택자는 다양한 방법으로 활용할 수 있으며, 선택자의 조합을 통해 더 복잡하고 다양한 요소를 선택하여 스타일을 적용할 수 있습니다.

참고 자료

• MDN Web Docs: CSS 선택자