CSS Selector

css selector에는 기본,태그,id,class 등 여러가지가 있는데,
오늘 정리할 내용은 부트캠프에서 많이들 헷갈려하는 부분에 대해서 정리해보려고 한다!
예시와 같이 설명하겠다

📌자식 셀렉터

header > p { }

ex)

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

📌후손 셀렉터

header p { }

ex)

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

위 형제와 후손 셀렉터의 차이점은 header의 p를 선택하는것인데,
후손 셀렉터는 header안에 있는 span태그 안의 p까지 모두 선택한 반면,
자식 셀렉터는 span태그 안의 p를 제외한 p태그를 선택한 것을 알 수 있다.

📌형제 셀렉터

section ~ p { }

ex)

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

📌인접형제 셀렉터

section + p { }

ex)

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

형제 셀렉터와 인접형제 셀렉터는 같은 부모요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는
두 번째 요소를 모두 선택하느냐( ~형제 셀렉터 ) 첫번째 요소만 선택하느냐 (+인접 형제 셀렉터)
의 차이로 볼 수 있다.

🎃 헷갈리는 구조 가장 클래스 셀렉터 정리

• p : first-child {...} ; p 엘리먼트 중에서, 첫 번째 자식 엘리먼트를 선택합니다.
• div : nth-last-child(2) {...} ; 형제 엘리먼트 중에서, 마지막에서 두 번째 엘리먼트가 div인 것을 선택
• ul > li:last-child {…} ; ul의 자식 엘리먼트 중에서, 마지막 자식 엘리먼트가 li인 것을 선택
• div:last-of-type{...} ; div 엘리먼트의 형제 엘리먼트 중 마지막 div 엘리먼트를 선택합니다.
• ection > p:nth-child(2n+1) {...} ; section의 자식 엘리먼트 중에서, 홀수 번째 자식 엘리먼트가 p인 것을 선택합니다.
• p:first-of-type {...} ; p 엘리먼트의 형제 엘리먼트 중 첫 번째 p 엘리먼트를 선택합니다. (first-child와는 다르게 첫 번째 자식 엘리먼트가 아닌, 처음 등장하는 p를 선택합니다)

()-of-type 과 (nth)-()-child의 차이점은
전자는 element 에 집중, 후자는 element가 아닌 순서를 먼저 생각한다.
(예를들어 div : nth-last-child(2) 일 때 요소에 상관없이 끝에서 ' 두 번째 '오는 div를 찾으면 된다) ( div : last-of-type 이면 div의 형제 요소 '중에서' 마지막 element를 찾으면 된다)