[CSS] 선택자

CSS 선택자를 이용하여 HTML 내에서 원하는 요소만을 선택하여 스타일을 적용할 수 있음

 

선택자 종류	설명	예시
유니버셜 선택자	모든 요소를 선택	* {color: blue;}
요소 선택자	특정 HTML 태그를 선택	p {font-size: 16px;}
아이디 선택자	특정 아이디를 가진 요소를 선택	#header {background-color: gray;}
클래스 선택자	특정 클래스를 가진 요소를 선택	.menu {display: flex;}
그룹화 선택자	여러 선택자를 그룹화하여 한번에 적용 (,를 통해 구분)	h1, h2, h3 {color: green;}
자식 선택자	직계 자식 요소를 선택	div > p {margin-top: 10px;}
후손 선택자	자식을 포함한 모든 후손 요소를 선택	div p {color: red;}
인접 형제 선택자	특정 요소 바로 다음에 위치한 형제 요소를 선택	h1 + p {font-weight: bold;}
일반 형제 선택자	특정 요소 뒤에 있는 모든 형제 요소를 선택	h1 ~ p {color: blue;}
속성 선택자	특정 속성을 가진 요소를 선택	a[href] {color: red;}
속성 값 선택자	특정 속성 값이 일치하는 요소를 선택	a[href="https://example.com"] {font-weight: bold;}

 

 

가상 클래스 선택자를 이용하여 브라우저나 사용자 상호작용에 따라 변화하는 상태에 있는 요소를 선택하게 해줄 수 있음

선택자 종류	설명	예시
:hover	요소 위에 마우스가있을 때 선택	a:hover {text-decoration: underline;}
:first-child	부모 요소의 첫 번째 자식을 선택	p:first-child {color: green;}
:last-child	부모 요소의 마지막 자식을 선택	p:last-child {font-size: 18px;}
:nth-child(n)	부모 요소의 n 번째 자식을 선택	li:nth-child(2) {background-color: yellow;}
:not()	지정된 조건에 맞지 않는 요소를 선택	p:not(.special) {color: gray;}
::before	요소의 내용 앞에 가상 요소를 삽입	p::before {content: "before text";}
::after	요소의 내용 뒤에 가상 요소를 삽입	p::after {content: "after text";}