[정리] 4 | 연결과 속성 선택자, 가상과 구조 가상 클래스, 가상 요소 정리

[정리] 4 | 연결과 속성 선택자, 가상과 구조 가상 클래스, 가상 요소 정리

연결 선택자

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

속성 선택자

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

가상 클래스

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

구조 가상 클래스

선택자	설명
:only-chlid	부모 안에 자식요소가 하나뿐일 때 자식요소 선택
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번째 요소 선택

가상 요소

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

 

 

 

 

 

 

 

 

 

 

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)