[CSS] CSS3에서 추가된 일반구조선택자

구조 선택자는 CSS3 새롭게 추가된 선택자 입니다.

주로 자손 선택자와 병행해서 사용되는데요.

오늘은 구조선택자 중에서 일반 구조 선택자에 대해서 알아보도록 하겠습니다.

일반구조선택자의 경우에는 아래와 같은 선택자 형태로 사용되어집니다.

:first-child                  첫 번째에 위치하는 자손을 선택합니다.                 

:last-child                  마지막에 위치하는 자손을 선택합니다

:nth-child(수열)           앞에서 수열 번째에 있는 자손을 선택합니다

:nth-last-child(수열)     뒤에서 수열 번쨰에 있는 자손을 선택합니다.

일반 구조 선택자의 형태를 보면 first-child,last-child는 쉽게 이해할수 있을겁니다 

반대로 nth-child(수열), nth-last-child(수열)은 약간의 의문점이 생길텐데요

간단하게 집고 넘어가도록 하겠습니다

수열을 3n 이라고 했을때 어떤 숫자가 나타날까요? 3n이라는 수열에 0부터 숫자를 넣어보도록 하겠습니다

0,3,6,9......

위와 같은 숫자들이 나타날겁니다 이말은 자손태그중에  3번째 6번째 9번째의 태그를 선택하게 된다는 뜻과 같습니다

결국 수열은 말그대로 n이라는 문자를 붙혀 선택하고자 하는 숫자룰 붙여주시기만 하면 됩니다 홀수,짝수에 위치하는 태그를 선택할때난 특정위치의 태그를 선택할때 유용하게 사용하실수 있을겁니다.