HTML_CSS_013_css_가상선택자

• nth child
• nth last child
• first child
• last child

tag_A 이면서 모든 요소 중 N번째 요소

tag_A:nth-child(N){
}

tag_A 이면서 A라는 요소 중 N번째 요소

tag_A:nth-of-type(N){
}

tag_A 이면서 모든 요소 중 첫번째 요소

tag_A:first-child{
}

tag_A 이면서 모든 요소 중 마지막 요소

tag_A:last-child{
}

tag_A 이면서 A라는 요소 중 첫번째 요소

tag_A:first-of-type{
}

tag_A 이면서 A라는 요소 중 마지막 요소

tag_A:last-of-type{
}

선택자를 두번 사용하여 교집합(:)인 요소만 선택할 수 있다.

p:nth-of-type(n+2):nth-of-type(-n+5)

nth-child

• :nth-child(1) = 첫번째 선택
• :nth-child(2n) = 두번째 마다 선택
• :nth-child(2n+1) = 첫번째 요소부터 2번째 마다 선택
• :nth-child(2n+5) = 다섯번째 부터 2개 마다 선택
• :nth-child(-2n+5) = 첫번째 요소부터 5번째 요소까지 2개 마다 선택
• :nth-child(n+5) = 5번째 부터 모두 선택
• :nth-child(-n+5) = 앞에서부터 5개만 선
• :nth-child(n+3):nth-child(-n+8) = 선택자를 두번 사용하여 교집합인 요소만 선택할 수 있다.
• :nth-child(odd) = 홀수 선택
• :nth-child(even) = 짝수 선택