[CSS] 선택자 정리

1. 기본 선택자

전체 선택자 (Universal selector)

html의 모든 요소에 적용

* {
    color: red;
}

 

타입 선택자 (Type selector)

특정 태그 이름을 가진 모든 요소를 선택

h1 {
	color: red;
}

 

클래스 선택자 (Class selector)

주어진 class명을 가진 모든 요소를 선택

.title {
	color: red;
}

 

ID 선택자 (ID selector)

id 속성에 맞는 요소를 선택

#title {
	color: blue;
}

 

속성 선택자 (Attribute selector)

주어진 속성을 가진 모든 요소를 검색 

 

특정 속성을 가진 요소 선택

• 문법: [attribute]
• 예제: title 속성을 가진 모든 요소를 선택

[title] {
    color: blue;
}

 

특정 값을 가진 속성을 선택

• 문법: [attribute="value"]
• 예제:  title 속성이 'example'인 요소를 선택

[title="example"] {
    color: blue;
}

 

특정 값을 포함하는 속성을 선택

• 문법: [attribute~="value"]
• 예제: class 속성에 'header' 단어가 포함된 요소를 선택

[class~="header"] {
    color: blue;
}

 

 

 

2. 복합 선택자 

 

일치 선택자 (태그와 클래스)

태그와 클래스를 동시에 만족하는 요소를 선택

 

<span class="orange">오렌지</span>

span.orange {
    color: red;
}

후손 선택자

자신이 포함하고 있는 모든 요소 중에서 선택

<div>
    <span class="orange">오렌지</span>
</div>

div .orange {
    color: red;
}

 

자식 선택자 

해당 태그의 자식 요소 중에서 선택

<ul>
    <li class="orange">오렌지</li>
</ul>

ul > .orange {
    color: red;
}

 

 인접 형제 선택자 

다음 형제 요소를 한 개 선택

<ul>
    <li class="orange">오렌지</li>
    <li>사과</li>
</ul>

.orange + li {
    color: red;
}

 

일반 형제 선택자 

다음 형제 요소를 모두 선택

<ul>
    <li class="orange">오렌지</li>
    <li>사과</li>
    <li>망고</li>
</ul>

.orange ~ li {
    color: red;
}