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)
왕이에요