1장 - 고급 선택자

자식 콤비네이터 > 직계 자식에 대한 요소만 선택하여 스타일을 적용한다.

• test
• test2
• test3

인접 형제 콤비네이터 요소 바로 뒤에 나오는 형제를 대상으로 한다. h1 바로 뒤에 오는 p 요소를 대상으로 할 때 사용한다

h2 바로 뒤에 오는 p 요소

일반 p 요소

일반 p 요소

일반 형제 콤비네이터

속성 선택자

요소를 선택하는 방법 - html 속성을 이용하는 것 특정 태그의 속성이 있으면 대상으로 하는 선택자 []

HTLM 속성의 값을 근거로 요소를 선택한다.

의사-클래스 Pseudo-Classes

처음과 마지막 요소 선택 목록 컴포넌트를 만들 때 마지막 부분에 더블 보더가 생기는 문제

:first-child - 첫번째 자식을 선택 :only-child - 자식이 하나라면 그 요소를 선택함

• Home
• About
• Contact

N번째 자식 선택자

:nth-child() 를 사용하여 n번째 자식을 선택할 수 있음

• test
• test2
• test3 (only red)
• test4

자식 요소중 특정 속성만 따져서 n번째를 선택하려면 nth-of-type

표현식을 이용하여 n번째 자식 확장하기

n은 0부터 시작한다 nth-child(f(n))에서 f(n)의 값이 0이 되면 선택하지 않음