css 선택자 (기본 선택자,계층 선택자)

 

CSS선택자

css에서 선택자는 말 그대로 선택을 해주는 요소이다. 이를 통해 특정 요소들에게 스타일을 적용할 수 있다. css선택자에는 여러 방법이 있다 우선 기본 선택자와 계층 선택자를 알아보자

기본 선택자

속성	예시	설명
태그 선택자	div {color: #fff}	div 태그를 선택하여 글씨 색을 하얀색으로 변경합니다.
클래스 선택자	.class {color: #fff}	class 클래스를 선택하여 글씨 색을 하얀색으로 변경합니다.
아이디 선택자	#id {color: #fff}	id 아이디를 선택하여 글씨 색을 하얀색으로 변경합니다.
그룹 선택자	div, p, {color: #fff}	div 태그와 p 태그를 선택하여 글씨 색을 하얀색으로 변경합니다.
전체 선택자	* {color: #fff}	전체선택하여 글씨 색을 하얀색으로 변경합니다.

계층 선택자

속성	예시	설명
하위 선택자 (Descendant Selector)	div p {color: #fff}	div 태그의 모든 자식 p태그를 선택해서 글씨 색을 하얀색으로 변경합니다
자식 선택자 (Child Selector)	div > p {color: #fff}	div 태그의 첫번째 p태그를 선택해서 글씨 색을 하얀색으로 변경합니다.
형제 선택자 (Sibling Selector)	div ~ p {color: #fff}	div 태그 뒤에 있는 모든 p태그를 선택해서 글씨 색을 하얀색으로 변경합니다.
인접 형제 선택자 (Adjacent Sibling Selector)	div + p {color: #fff}/td>	div 태그 바로 뒤에 있는 p태그 한개만 선택해서 글씨 색을 하얀색으로 변경합니다.