14. Pseudo selectors

<pseudo selector>

좀 더 세부적으로 element를 선택하게 해주는 것 (가상 선택자)

 

 

어떤 box나 콘텐츠의 스타일을  변경하고 싶으면 보통은

div, span  등 태그의 이름을 적거나

#으로 아이디를 적거나 .(온점)으로 class를 적어서

원하는 element를 불러와서 사용.

 

다른 방식으로 해당 elementfmf 선택 시에는?

 

예를 들어 많은 div 중에 제일 마지막 div를 선택한다거나

제일 처음의 class를 선택할 시에는?

 

pseudo selector를 사용하여 선택할 수 있음.

 

 

 

1) last-child

맨 끝의 박스만 색이 바뀜

div:last-child를 해주어 마지막 div를 선택하여 변경함.

 

그럼 처음 상자를 선택하려면?

 

 

 

2) first-child

처음 상자와 마지막 박스의 색이 바뀜

div:first-child를 해주어 처음 div를 선택하여 변경함.

 

그렇다면 내가 원하는 element 를 선택하는 다른 방법은?

 

 

 

3) nth-child( )

3번째의 박스를 선택하여 색을 바꿈

span:nth-child(3)을 해주어 3번째의 span을 선택하여 변경함.

2나 4를 적어서 두 번째와 네 번째를 변경시킬 수도 있음.

교차해서 색을 변경하고 싶다고 2,4,6... 혹은 1,3,5...처럼 적는 건 비효율적임.

 

 

어떻게 하면 좋을까?

 

 

 

4) nth-child(even)

2,4,6번째의 색이 바뀐 모습

span:nth-child(even)을 하여서 짝수 번째에 있는 박스를 선택하여 변경함.

 

그럼 홀수 번째에 있는 박스를 선택하려면?

 

 

 

5) nth-child(odd)

1,3,5번째의 색이 바뀐 모습

span:nth-child(odd)를 하여서 홀수 번째에 있는 박스를 선택하여 변경함.

 

 

 

6) nth-child(n+1)

3n+1째인 1,4번째의 색이 바뀐 모습

span:nth-child(3n+1)을 하여서 3n+1의 패턴대로 선택하여 변경함.

 

이 외에도

n+1, 2n+1, 3n+1, 4n+1....

n+2, n+3.....

2n+2, 2n+3.....

등 등 다양한 패턴을 만들어서 스타일을 변경할 수 있음.