(CSS) 선택자

선택자 (Selector)

- 특정 요소를 선택해서 스타일을 원하는 설정을 부여해 주기 위해 요소이다

 

선택자 종류

• 전체 선택자(Universal Selector)
• id 선택자(ID Selector)
• class 선택자(Class Selector)
• 하위 선택자(Descendant Selector)
• 자식 선택자(Child Selector)
• 복합 선택자(Complex Selector)
• 가상 선택자(Pseudo Selector)

 

 

전체선택자

• 모든 태그에 적용하기 위한 방식
• * { } 

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

 

ID선택자

• id속성 선택자를 찾아 style을 적용하는 방식
• #id { }

#test {
	background-color: lightgray;
}

 

Class선택자

• Class 선택자를 찾아 style을 적용하는 방식
• . class {}

.test {
 background-color: lightcoral;
}

 

하위선택자

• 앞쪽 클래스명 선택자 하위에 있는 태그들 중 뒤쪽 클래스명 선택 자명을 가진 태그들을 찾는다
• 앞쪽클래스명 .뒤쪽클래스명 {}

.tets1 .test2 {
 background-color: blue;
}

 

복합선택자

• 해당 태그 이면서 클래스명을 가진 태그를 찾아 CSS를 적용한다
• 태그 .클래스명 { }

p.test {
 	background-color: blue;
}

 

복합선택자

• 해당 태그에 id명선택자와 클래스명선택자을 가진 태그들을 찾아 css를 적용한다
• 태그#id명.class명 {} 

p#test.test {
 background-color: orange;
}

 

복합선택자 - 자식선택자

• > 표시로 바로 하위에 있는 자식들만 접근해서 css 효과를 적용할 수 있다
• , (쉼표)로 여러 클래스명선택자에게 한 번에 적용할 수 있다
• .클래스명, .클래스명 > .클래스명 {} 

.child1,
.parent > .child2 {
	width: 200px;
	height: 100px;
	margin: auto;
	background-color: cornsilk;
}

 

 

가상클래스 선택자

• 클래스명에 해당하는 부모의 자식의 자식클래스명에서 n번째 자식에게 css 효과를 설정할 수 있다
• .부모클래스명 자식클래스명 자식클래스명:nth-child(n) { }

.parent > .child > .child2:nth-child(2) {
    font-size:2rem;
}