[CSS] 10_CSS 고급 선택자

# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다.

 

01 연결 선택자

1. 하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자

- 특정요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 함

- 기준 요소를 기준으로 한 단계 아래 요소는 자식요소, 그 요소의 한 단계 요소는 손자요소

 

1) 하위 선택자

- 하위 선택자를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택함

section p { ..... }
상위요소 하위요소

2) 자식 선택자

- 하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자

section > p { .... }
부모요소 > 자식요소

 

2. 형제 요소에 스타일을 적용하는 인접 형제 선택자와 형제 선택자

1) 인접 형제 선택자

- 형제 요소중 첫 번째 동생 요소만 선택하는 것을 인접 형제 선택자라고 한다.

요소1 + 요소2
h1 + p { .... }
*h1요소와 형제인 첫 번째 p요소만 선택하여 글자를 파란색으로 적용

2) 형제 선택자

- 형제 요소의 스타일을 정의하는데 인접 형제 선택자와 달리 모든 형제 요소에 적용됨

요소1 ~ 요소2
h1 ~ p { color: blue; }
*h1 요소 뒤에 오는 모든 형제 p 요소에 적용

 

02 속성 선택자

종류	선택 요소	예시
[속성]	해당 속성이 있는 요소	[required]
[속성 = 값]	지정한 속성값이 있는 요소	[target = _blank]
[속성 ~= 값]	지정한 속성값이 포함된 요소(단어별)	[class ~= button]
[속성 |= 값]	지정한 속성값이 포함된 요소(하이픈 포함, 단어별)	[title |= us]
[속성 ^= 값]	지정한 속성값으로 시작하는 요소	[title ^= eng]
[속성 $= 값]	지정한 속성값으로 끝나는 요소	[href $= xls]
[속성 *= 값]	지정한 속성값의 일부가 일치하는 요소	[href *= w3]

 

03 가상 클래스

종류	설명
:link	방문하지 않는 링크에 스타일을 적용
:visited	방문했던 링크에 스타일을 적용함
:hover	지정한 요소에 마우스 포인터를 올려놓을 때 스타일 적용
:active	지정한 요소를 활성화 했을 때 적용
:focus	지정한 요소에 초점이 맞춰졌을 때 스타일 적용
:target	앵커 대상에 스타일을 적용함
:enabled	지정한 요소를 사용할 수 있는 상태일 때 스타일 적용
:disabled	지정한 요소를 사용할 수 없는 상태일 때 스타일 적용
:checked	선택한 요소의 스타일을 적용
:not	지정한 요소가 아닐 때 선택해서 스타일 적용

a:link, a:visited { ... }
*방문하지 않는 링크와 방문한 링크에 대해 스타일 적용

 

04 구조 가상 클래스

선택자	설명
:only-child	부모 안 자식 요소가 하나뿐일 때 자식 요소 선택
A:only-type-of	부모 안에 A 요소가 하나뿐일 때 선택
:first-child	부모 안에 있는 요소중 첫 번째 자식 요소 선택
:last-child	부모 안에 있는 요소 중 마지막 자식 요소 선택
A:first-of-type	부모 안에 A 요소중 첫 번째 요소를 선택
A:last-of-type	부모 안에 A 요소중 마지막 요소를 선택
:nth-child(n)	부모 안에 있는 모든 요소 중 n번째 자식 요소 선택
:nth-last-child(n)	부모 안에 잇는 모든 요소중 끝에서 n번째 자식 요소 선택
A:nth-of-type(n)	부모 안에 있는 A요소 중에서 n번째 요소 선택
A:nth-last-of-type(n)	부모 안에 있는 A요소 중에서 끝에서 n번째 요소 선택

 

05 가상 요소

선택자	설명
::first-line	첫 번째 줄을 선택함
::first-letter	줄에서 첫 번째 글자를 선택함
::before	특정 요소의 앞에 내용이나 스타일을 추가함
::after	특정 요소의 뒤에 내용이나 스타일을 추가함