CSS 선택자 (기본, 복합)

 

기본 선택자 

 

* {
    속성: 값;
}

전체 선택자(Universal Selector) - 모든 요소를 선택한다

 

태그명 {
    속성: 값;
}

li {
    color: blue;
}

태그 선택자(Type Selector) - 태그 이름이 태그명인 요소를 선택한다

 

.클래스명 {
    속성: 값;
}

클래스 선택자(Class Selector) - HTML class 속성의 값이 클래스명인 요소를 선택한다

 

#아이디명 {
    속성: 값;
}

아이디 선택자(ID Selector) - HTML id 속성의 값이 ID명인 요소를 선택한다

 

※ class속성과 id속성은 HTML의 전역 속성

 

---

 

복합 선택자

 

복합 선택자란 기본 선택자 4가지(전체, 태그, 클래스, 아이디)를 조합해서 사용하는 선택자

 

/* CSS */

선택자1+선택자2 {
    속성: 값;
}

div.blue {
    color: blue;
}

<!-- HTML -->
<div class="blue">블루</div> /* 2가지 만족 */

일치 선택자(Basic Combinator) - 기본 선택자 2가지를 동시에 만족하는 요소를 선택한다

 

/* css */

선택자1 > 선택자2 {
    속성: 값;
}

div > .blue {
    color: blue;
}

<!-- HTML -->
<div>
    <span class="blue">블루</span> /* div 태그의 자식 요소이며 클래스명이 blue인 요소 */
</div>

자식 선택자(Child Combinator) - 선택자1의 자식 요소 선택자2를 선택한다

 

/* css */
/* 하위(후선) 선택자는 띄어쓰기로 구분 */

선택자1 선택자2 {
    속성: 값;
}

div .blue {
    color: blue;
}

하위(후손) 선택자(Descendant Combinator) - 선택자1의 하위 요소 선택자2 선택한다 (띄어쓰기가 선택자의 기호)

 

선택자1 + 선택자2 {
    속성: 값;
}

인접 형제 선택자(Adjacent Sibling Combinator) - 선택자1의 다음 형제 요소 선택자2 하나를 선택한다

 

선택자1 ~ 선택자2 {
    속성: 값;
}

일반 형제 선택자(General Sibling Combinator) - 선택자1의 다음 형제 요소 선택자2 모두를 선택한다