[html/css] css selectors(선택자)

css를 작성하다보면, 양이 늘어날 수록 internal style sheet로 작성하기 힘들어진다.

그럴 때 id나 class를 부여하는 등의 방법으로 태그들을 분류한 후, css에서 스타일을 입힌다.

이 때, 부여한 특정 id, class, 혹은 특정 태그 종류들에게 스타일을 부여하는 방법이 css selectors(선택자)이다.

 

기본 css 선택자에는 4가지 종류가 있다.

태그 종류	설명	문법
Universal Selector 전체 선택자	전체 선택	*{...}
Type Selector 타입 선택자	태그 종류로 선택	태그이름{...}  ex) h1{...}, p{...}
Class Selector 클래스 선택자	부여한 클래스로 선택	.클래스이름{...} ex) .imagebox{...}
ID Selector ID 선택자	부여한 아이디로 선택	#아이디이름{...} ex) #profile-photo{...}

 

기본 선택자 이외에도, 복합 선택자가 존재한다.

1. Group combinator 

selector, selector{...}

2개 이상 적용 가능

h1, h2{
	color: firebrick
}

2. Child combinator (자식 선택자)

selector(parent) > selector(child){...}

직계 자손 태그에만 적용이 가능함.

.outerbox > p{
	background-color:cyan
}

3. Descendant combinator (후손 선택자)

selector(ancestor)  selector(descendant) {...}

ancestor selector의 하위 요소 descendant selector를 선택

.list li{
	color:blue
}

4. Chaining selector

selector1selector2 {...}

selector1과 selector2의 요소를 전부 만족시키는 태그를 선택

태그 명을 포함시킬 시, 맨 처음에 태그가 오도록 해야 함

h1#title-text.big.heading{
	color:white
}

 

 

본 포스트는 udemy 강의를 정리한 것 입니다.