셀렉터

1. 기본 셀렉터

1-1. 전체 셀렉터

전체 셀렉터는 문서의 모든 요소를 선택한다

* {}

1-2. 태그 셀렉터

태그 셀렉터는 같은 태그명을 가진 모든 요소를 선택한다. (복수 선택 가능)

h1 {}
div {}

section, h1 {}

1-3. ID 셀렉터

ID 셀렉터는 #id로 입력하여 선택한다.

#only {}

1-4. class 셀렉터

class 셀렉터는 .class로 입력하여 선택한다. 같은 class를 가진 모든 요소를 선택한다

.widget { }
.center { }

1-5. attribute 셀렉터

attribute 셀렉터는 같은 속성을 가진 요소를 선택한다. (모두 암기 X)

a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

2-1. 자식 셀렉터

자식 셀렉터는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택한다. 아래 예시의 경우 <header> 요소 바로 아래에 있는 두 개의 <p> 요소는 선택되지만, <span> 요소의 자식인 <p> 요소는 선택되지 않는다. (마찬가지로 후손 셀렉터와의 차이를 반드시 알고 있어야 함)

header > p { }

<header>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
</header>

예를 들어보자

<div class="container">
    <h1> TITLE </h1>
    <ul>
        <li>list 1</li>
        <li>list 2</li>
        <li>list 3</li>
    </ul>
</div>

다음과 같이 작성되어 있을 때 이때 div 의 자손 선택자는 h1, ul 이며
후손 선택자는 li를 말한다.

2-2. 후손 셀렉터

후손 셀렉터는 첫 번째로 입력한 요소의 후손을 선택한다. 아래 예시의 경우 <header> 요소의 자식인 <p> 요소를 뿐 아니라, <header> 요소의 자식의 자식이 있는 <p> 요소까지 모두 선택됩니다. (자식 셀렉터와의 차이점을 반드시 알고 있어야 함.)

header p {}

<header>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
</header>