CSS.16 // selector.04

:nth-child(수식), :nth-of-type(수식)

부모태그안에 형제 태그중 홀수번째나 짝수번째 형제를 선택하고싶다면
even(짝수), odd(홀수)키워드를 이용하여 선택할 수 있다.

또한 여러 요소 중 특정 범위의 자식요소들을 선택하고 싶다면
'n+숫자' 키워드를 통해 선택할 수 있다.

[기본형]

- :nth-child(even) : 짝수 번째 위치한 자식요소 선택
- :nth-child(odd) : 홀수 번째 위치한 자식요소 선택
- :nth-child(n+숫자) : 숫자 번째에 위치한 자식부터 막내까지 모두 선택
- :nth-child(-n+숫자) :  숫자 번째에 위치한 자식부터 첫째까지 모두 선택

is 선택자

같은 스타일을 여러 요소에 적용할때 사용하는 선택자이다.
최근에 발표된 선택자로 같은 스타일을 여러 요소에 적용할때 간편하게 선언할 수 있다.

[기본형]

:is(선택자1, 선택자2, 선택자3...){ }

/* is선택자 활용 전 */

h1:hover,
h2:hover,
h3:hover {
   color: salmon;
}

/* is선택자 활용 */

:is(h1, h2, h3):hover {
   color: salmon;
}

:has 선택자

has선택자는 태그안에 특정 태그가 있으면 선택해주는 선택자이다.

[기본형]

선택자:has(태그)

/* has선택자 활용 */

ul a:hover {
   color: salmon;
}
ul:has(a:hover) a:not(:hover) {
opacity: 0.3;
}

1.ul:has(a:hover) :
ul영역에서 후손a태그를 찾을건데 :hover선택자를
포함하는 a태그를 찾음.
        
2. a:not(:hover) :
ul안에 후손인 a태그에 opacity를 적용할건데
a태그 중 마우스 올라간 태그는 제외