CSS 쉽게 배우기 | Pseudo Class(수도 클라스)2

CSS 수도 선택자로 요소 선택폭 넓히기

 

저번편에 이어서 수도 클라스 두번째 편입니다

 

지난번에 수도 클래스에는 상태에 관련되 선택자, 일반 선택자의 연장선, 이렇게 두 종류의 속성을이 있다고 했었죠

이번편에서는 그 두 번째인 일반 선택자의 연장선을 알아볼게요

 

일반 선택자의 연장선이란?

일반 선택자라고 하면 어감이 좀 이상하지만, 일반 선택자는 우리가 CSS편에서 처음으로 배운 선택자들을 말합니다

그럼 그 선택자들의 연장선이란 뭘까요?

 

연장선이라기 보다는 추가적으로 사용할수있는 선택자가 더 말이 맞을거 같네요

예시로 설명을 해볼게요

<div class="container">
	<p>...</p>
	<p>...</p>
	<p>...</p>
	<p>...</p>
</div>

이렇게 컨테이너 요소 안에 자녀 요소들이 있습니다

우리가 배운 일반 선택자로 자녀 요소들의 색상을 바꾸려면

.container p {
	color: red;
}

이렇게 하죠

그런데, 이렇게하면 모든 자녀의 색상이 바뀌는데

저는 첫번째만 바꾸고 싶은데...

 

그러면 첫번째 자녀에 class를 주고 그걸 사용해서 색상을 바꾸면 되죠

 

그럼 여기서 질문!

첫번째 자녀에 class를 줄수 없는 경우, 어떻게 첫번째 자녀의 색상만 바꿀수 있을까요?

아니면, 두번째와 네번째 자녀만 색상을 바꾸려면 (class없이) 어떻게 할까요?

 

지금부터 그 방법들을 알아볼게요

 

:first-child / :last-child

:first-child는 첫번째 자녀 요소를 선택합니다

위에서 본 예시에 적용하면

.container p:first-child { //컨테이너 요소의 첫번째 <p>자녀
	...
}

이렇게 사용할수 있습니다

만약에 <p>가 컨테이너의 첫번째 자녀가 아니면 적용되지 않습니다

<style>
	.container p:first-child {...}
</style>

/* :first-child가 적용됨 */
<div class="container"> /* <p>가 첫번째 자녀 요소임 */
	<p>...</p> /*.container p:first-child {...}*/
	<p>...</p>
	<p>...</p>
</div>

/*:first-child 적용 안됨*/
<div class="container"> /* <p>가 첫번째 자녀 요소가 아님 */
	<img>
	<p>...</p>
</div>

 

:last-child 선택자는 마지막 자녀 (막내?)를 선택합니다

:first-child 과 같은 방식으로 마지막 자녀 요소에 적용합니다

 

 

 

 

 

:first-of-type / :last-of-type

이 선택자는 위에서본 선택자와는 다르게 적용됩니다

위에서 봤듯이 :first-child는 선택하려는 자녀 요소가 바로 첫번째 요소일때만 적용되지만

:first-of-type은 자녀요소의 순서에 상관없이 선택한 자녀 요소 타입의 첫번째에 적용됩니다

<style>
	.container p:first-of-type {...}
	.container p:last-of-type {...}
</style>

<div class="container">
  <div>Lorem, ipsum dolor.</div>
  <div>Lorem, ipsum dolor.</div>
  <div>Lorem, ipsum dolor.</div>
  <div>Lorem, ipsum dolor.</div>
  <p>Lorem ipsum dolor sit amet.</p> /* .container p:first-of-type {...} */
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet.</p> /* .container p:last-of-type {...} */
  <div>Lorem, ipsum dolor.</div>
  <div>Lorem, ipsum dolor.</div>
  <div>Lorem, ipsum dolor.</div>
  <div>Lorem, ipsum dolor.</div>
</div>

 

:last-of-type도 :first-of-type과 같은 방식으로 자녀 요소의 순서에 상관없이 선택한 자녀 요소 타입의 마지막번째에 적용됩니다

 

 

 

 

 

:nth-child(n)

이 선택자는 자녀 요소 타입에 상관없이 n번째 자녀 요소를 선택할수 있습니다

아래 HTML으로 설명해볼게요

<div class="container">
  <h1>Lorem, ipsum dolor.</h1>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  <img src="https://picsum.photos/200" alt="">
  <h2>Lorem, ipsum.</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus?</p>
</div>

.container p:nth-child(1){...}은 컨테이너 요소의 첫번째 자녀가 <p> 인경우 적용됩니다

하지만 HTML을 보면 컨테이너의 첫번째 자녀는 <p>가 아니라 <h1>이죠

.container p:nth-child(2){...}은 <h1>다음으로 오는, 즉 첫번째 <p>에 적용됩니다

 

이 선택자에서 n은 숫자, 키워드, 또는 공식이 될수도 있습니다

 

숫자는 위에서 처럼 1, 2, 3... 을 사용하고

키워드는 홀수(odd), 짝수 (even)을 사용할수있고

공식은 (an+b)를 사용합니다

공식에서 a는 주기, n은 카운터, b는 오프셋 값입니다

만약에 p:nth-child(2n+1)이라고 하면

첫번째 자녀 부터 시작해서 매 두번째 <p>에 주어진 스타일을 적용합니다 (1, 3, 5, 7...)

(2n+0)는 (2n)과 같습니다

이 경우에는 두번째 자녀 부터 시작해서 매 두번째 자녀에 주어진 스타일을 적용합니다 (2, 4, 6, 8...)

 

 

 

 

 

:nth-of-type(n)

이 선택자는 위에서 본 선택자와 비슷하지만 특정 요소 타입에만 적용됩니다

아래 HTML을 예로 들어볼게요

<div class="container">
	<h1>	
	<p>
	<img>
	<a>
	<p>
	<p>
	<img>
</div>

컨테이너 요소 안에 여러 타입의 자녀 요소들이 있죠?

여기 <p>요소가 3개 있는걸 볼수있습니다

이 3개중 2번째에 스타일을 주고 싶으면

.container p:nth-of-type(2){...}을 사용하면 됩니다

 

:nth-child()과 마찬가지로 n에 숫자, 키워드, 또는 공식을 사용할수 있습니다

 

 

 

 

:nth-child(n) 과 :nth-of-type(n) 차이점

 

 

이렇게 수도 클라스에 대해서 알아봤습니다

어려운것 같지만 몇번 해보면 정말 쉽고 자주 사용하게 될거에요

 

 

궁금한게 있으시면 댓글 남겨주세요

 

수고 하셨습니다

 

 

끝!