[CSS] Selector(선택자)

Type Selector (태그,요소 ... 선택자)

html 태그를 직접적으로 지칭합니다.

p {
	color: #212529;
}

blockquote {
	background-color: #e0e0e0;
}

 

 

 

Class Selector (클래스 선택자)

동일한 스타일을 여러 요소에 넣고 싶을 때 사용합니다.

한 html 요소에 여러 개의 클래스를 가질 수 있습니다.

.red {
	color: #ff4949;
}

.blue {
	color:#0066ff;
}

.box1.box2.box3{
	color: 000000;
}

.box1.box2.box3와 같이 공백 없이 클래스가 나열된다면 box1, box2, box3를 전부 클래스로 갖고 있는 요소를 뜻합니다.

<div class="box1 box2 box3">

 

 

 

ID Selector (ID 선택자)

식별자(identifier) 선택자.

식별자이기 때문에 html 문서에 같은 이름을 가진 id가 여러 개 있으면 안되겠죠?

#jin {
	font-style: italic;
}

 

 

 

 

Child Selector (자식 선택자)

바로 아랫단계의 요소를 선택할 때 사용합니다.

.parent > .child {
	...
}

 

 

 

Descendant Selector (자손 선택자)

하위의 모든 단계 요소 중 해당되는 요소들을 선택합니다. 자식 요소도 포함됩니다.

.parent .descendants {
	...
}

 

 

 

 

Sibling Selector (형제 선택자)

같은 계층에 있는 요소를 선택합니다.

.sibling + li {
	...
    sibling class 다음에 따라오는 같은 계층의 li 요소 하나를 선택합니다.
}


.sibling ~ li {
	...
    sibling class 다음에 따라오는 같은 계층의 모든 li 요소를 선택합니다.
}

 

 

 

 

Structural Pseudo-classes (구조적 가상 클래스 선택자, child)

 

li:first-child {
	...
    첫 번째 li 요소
}

li:last-child {
	...
    마지막 li 요소
}

li:nth-child(5) {
	...
    다섯 번째 li 요소
}

li:nth-child(2n) {
	...
    짝수 번째 li 요소
}

 

 

 

 

User Action Pseudo-classes (동적 가상 클래스 선택자)

유저의 액션에 따라 선택해주는 선택자입니다.

a:hover{
	마우스가 요소에 올라갔을 때
}

a:active{
	마우스로 요소를 눌렀을 때
}

input:focus{
	요소가 focus 되었을 때 (누르거나 글 입력 활성화 등)
}

 

form, input, a 같이 유저와 interaction이 많은 요소에 자주 쓰입니다.

 

 

 

 

선택자 우선순위

Type(태그, 요소) < Class, pseudo-class < ID

보통 위의 세 가지로 선택자를 구성하며

셋 중에는 id selector가 가장 힘이 강하기 때문에 먼저 적용됩니다.

 

rule breakers

inline style < !important

위의 세 가지 위계를 무시해버리는 이 둘은 웬만하면 사용하지 않는 것이 바람직합니다.

inline style이나 !important 가 있게 된다면 css 파일을 수정해도 적용이 되지 않아 유지,보수가 어려워집니다.