CSS3 - 구조 선택자

구조 선택자는 일반적으로 자손 선택자와 병행해서 많이 사용한다.

 

일반 구조 선택자

선택자 형태	설명
:first-child	형제 관계 중에서 '첫 번째'에 위치하는 태그를 선택
:last-child	형제 관계 중에서 '마지막'에 위치하는 태그를 선택
:nth-child(수열)	형제 관계 중에서 '앞'에서 수열 번째에 태그를 선택
:nth-last-child(수열)	형제 관계 중에서 '뒤'에서 수열 번째에 태그를 선택

이 중에서 수열이 들어가는 :nth-child(수열)과 :nth-last-child(수열)을 예로 들자면 2n+1은 n값에 0부터 차례대로 넣어 1, 3, 5, 7, 9... 번째에 있는 태그를 선택합니다. 이것을 이용해 아래 예시1을 보면 이해 할 수 있다.

예시1

구조 선택자를 사용하면서 자주 실수하는 부분이 있는데 아래 예시2에서 li 태그의 첫 번째 자손에 위치하는 a 태그를 선택하였기 때문에 li 태그 아래에 모든 a 태그가 선택이 된다.

예시2

만약 첫번째 li 태그의 a 태그를 선택하려고 한다면 아래 예시3과 같이 입력을 해야한다.

예시3

형태 구조 선택자

형태 구조 선택자는 일반 구조 선택자와 다르게 태그의 형태를 구분한다.

선택자 형태	설명
:first-of-type	형제 관계 중에서 '첫 번째'로 등장하는 특정 태그를 선택
:last-of-type	형제 관계 중에서 '마지막'으로 등장하는 특정 태그를 선택
:nth-of-type(수열)	형제 관계 중에서 '앞에서' 수열 번째에 등장하는 태그 선택
:nth-last-of-type(수열)	형제 관계 중에서 '뒤에서' 수열 번째에 등장하는 태그 선택

예시4

위의 예시4의 :first-of-type 구조 선택자로 인해 '첫 번째'로 등장하는 특정 형태의 태그가 선택이 된다.

예시5

위의 예시5는 body 태그의 자손중 '첫 번째'로 등장하는 모든(*) 형태의 태그를 선택한다. body 태그 내부에 모든 태그가 각각 한번씩 등장 하므로 위의 결과가 나온 것이다.