다재다능한 CSS3 선택자

연결 선택자

하위 선택자 - 지정한 모든 하위 요소에 스타일 적용하기

자식 선택자 - 자식 요소에만 스타일 적용하기(부모요소 > 자식요소)(손자X 자식만)

인접 형제 선택자 - 가장 가까운 형제 요소에 스타일 적용하기(요소1+요소2)(첫째 동생만)

형제 선택자 = 형제 요소에 스타일 적용하기(요소1~요소2) (ex) h1~p{...}에서 h1다음에오는 모든 형제p요소)

속성 선택자

가상 클래스와 가상 요소

사용자 동작에 반응하는 가상 클래스

1. :link - 방문하지 않은 링크에 스타일 적용

2. :visited - 방문한 링크에 스타일 적용

3. :hover - 웹 요소에 마우스 커서를 올려놓을 때의 스타일 적용

4. :active - 웹 요소를 활성화했을 때의 스타일 적용

5. :focus - 웹 요소에 초점이 맞추어졌을 때의 스타일 적용

UI 요소 상태에 따른 가상 클래스

1. :enabled, :disabled - 요소를 사용할 수 있을 때와 없을 때의 스타일 지정

2. :checked - 라디오 박스나 체크 박스에서 해당 항목을 선택했을 때의 스타일 지정

구조 가상 클래스

1. :root - 문서 전체에 적용하기

2. :nth-child(n)와 :nth-last-child(n) - 자식 요소의 위치에 따라 스타일 적용하기 (n은 0부터)

div p:nth-child(3)
div p:nth-child(odd), div p:nth-child(2n+1)
div p:nth-child(even), div p:nth-child(2n+0), div p:nth--child(2n)

3. :nth-of-type(n), :nth-last-of-type(n) - 특정 태그 위치에 스타일 적용하기

4. :first-child, :last-child - 첫번째, 마지막 요소에 스타일 적용하기

5. :firsst-of-type, :last-of-type - 형제 관계 요소의 위치에 따라 스타일 적용하기

6. :only-child, :only-of-type - 하나뿐인 자시기 요소에 스타일 적용하기

그 외 가상 클래스

1. :targeet - 앵커 목적지에 스타일 적용하기(같은 문서안에서 다른 위치로 이동할때 목적지 부분 스타일)

2. :not - 특정 요소가 아닐 때 스타일 적용하기(ex) p:not(#ex){color:blue})

가상 요소

1. ::first-line 요소와 ::first-letter 요소 - 첫번째 줄, 첫번째 글자에 스타일 적용하기

2. ::before, ::after 요소 - 내용의 앞뒤에 콘텐츠 추가하기