CSS 기본 5

연결 선택자

종류	형식	설명
하위 선택자	상위요소 하위요소	상위 요소에 포함된 모든 하위 요소를 선택합니다.
자식 선택자	부모요소 > 자식요소	부모 요소에 포함된 자식 요소만 선택합니다.
인접 형제 선택자	요소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-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번째 요소를 선택합니다.

가상 요소

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