[Web/CSS] CSS - 복습 5

✏️ 연결 선택자

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

✏️ 속성 선택자

종류	선택 요소	예시
[속성]	해당 속성이 있는 요소	[required]
[속성=값]	지정한 속성값이 있는 요소	[target = _blank]
[속성~=값]	지정한 속성값이 포함된 요소(단어별)	[class ~= button]
[속성|=값]	지정한 속성값이 포함된 요소(하이픈 포함, 단어별)	[title |= us]
[속성^=값]	지정한 속성값으로 시작하는 요소	[title ^= eng]
[속성$=값]	지정한 속성값으로 끝나는 요소	[title $= 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-line	첫 번째 줄을 선택
::first-letter	줄에서 첫 번째 글자를 선택
::before	특정 요소의 앞에 내용이나 스타일을 추가
::after	특정 요소의 뒤에 내용이나 스타일을 추가