CSS 선택자

CSS 선택자

다음 프로젝트에서 중요한 게 뭐냐고 물었더니 CSS 라고 하는데, 제대로 배워본 적도 없는 알못이기에 블로그에 정리한다.

CSS 선택자(selector)는 HTML 문서 내에서 요소를 선택하기 위해 사용되는 패턴이다. 선택자를 사용하여 원하는 요소를 스타일링하거나 조작할 수 있다.

다음은 일반적으로 사용되는 몇 가지 CSS 선택자의 예시와 설명이다:

요소 선택자

요소의 이름을 사용하여 해당 요소를 선택

• h1, p, div

클래스 선택자

클래스 속성을 가진 요소 선택

• .container, .btn, .highlight

ID 선택자

고유한 ID 속성을 가진 요소 선택

• #header, #sidebar, #logo

자식 선택자

특정 요소의 자식 요소 선택

• ul > li, div > p

후손(하위) 선택자

특정 요소의 모든 하위 요소 선택

• div p, ul li

속성 선택자

특정 속성을 가진 요소 선택

• [type="text"], [href^="https://"]

a[href*='florence'] {
  color: lightgreen;
}

가상 클래스 선택자

특정 상태나 위치에 있는 요소 선택

• :hover, :first-child, :nth-child(2)