CSS(Cascading Style Sheets)는 웹페이지의 스타일을 정의하기 위한 언어이며, 선택자는 스타일을 적용할 HTML 요소를 선택하는 데 사용됩니다. CSS 선택자를 사용하여 웹페이지의 모양과 레이아웃을 조정할 수 있습니다.

기본 선택자

요소 선택자

p {
  color: blue;
}

위의 코드는 <p> 요소에만 파란색 텍스트를 적용합니다.

클래스 선택자

.myClass {
  font-weight: bold;
}

위의 코드는 myClass 클래스를 가진 요소에 볼드체 텍스트를 적용합니다.

ID 선택자

#myID {
  background-color: yellow;
}

위의 코드는 myID ID를 가진 요소의 배경색을 노란색으로 설정합니다.

조합된 선택자

후손 선택자

div p {
  font-size: 16px;
}

위의 코드는 <div> 요소 하위의 모든 <p> 요소에 글꼴 크기를 16px로 지정합니다.

자식 선택자

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

위의 코드는 <ul> 요소의 직계 자식인 <li> 요소에 사각형 모양의 리스트 스타일을 적용합니다.

가상 클래스 선택자

a:hover {
  text-decoration: underline;
}

위의 코드는 마우스를 올렸을 때 링크의 텍스트에 밑줄을 추가합니다.

속성 선택자

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

위의 코드는 type 속성 값이 “text”인 요소에 너비를 200px로 설정합니다.

CSS 선택자를 적절히 활용하여 웹페이지 스타일을 제어할 수 있으며, Selector에 대해 좀 더 자세히 알아보고싶다면, MDN 웹사이트의 CSS 선택자 에서 더 많은 정보를 확인할 수 있습니다.