[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "CSS-셋째마당: 10.CSS 고급선택자"

10-1 연결 선택자

종류	형식	설명
하위 선택자	상위요소 하위요소	상위요소 포함 모든 하위요소 선택
자식 선택자	부모요소 > 자식요소	부모요소 포함 자식요소만 선택
인접 형태 선택자	요소1 + 요소2	요소1 이후 먼저 오는 형제요소 선택
형제 선택자	요소1 ~ 요소2	요소1과 형제인 모든 요소 선택

 

10-2 속성 선택자

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

 

10-3 가상 클래스와 가상 요소

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

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

 

가상클래스 순서 적용

① :link   ->  ② :visited  ->  ③ :hover  ->  ④ :active

 

 

구조 가상 클래스

선택자	설명
: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번째 요소 선택

 

가상요소

가상클래스와 구별하도록 가상요소 이름 앞에 콜론 2개 (::)를 붙여서 표시.

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

 

 

---

출처

https://easyspub.co.kr/20_Menu/BookView/PUB/421/PUB

https://easyspub.co.kr/20_Menu/BookView/PUB/421/PUB