빨간색 코드를 보고 파란색의 요구사항에 맞춰 CSS 선택자를 입력하면 된다.
plate
bento
plate#fancy
plate>apple
plate#fancy>pickle
apple.small
orange.small
bento>orange.small
plate ,bento
*
plate *
plate + apple
(형제관계로 인접해있는 셀럭터는 +로 같이 선택할 수 있음)
pickle ~ pickle
plate > apple
plate :first-child
first-child: 태그의 첫번재 자식
plate :only-child
다른 요소 내부에 유일한 요소가 있는 요소를 선택
.small :last-child
부모 요소의 자식 요소 중에서 마지막에 위치하는 요소를 선택
:nth-child(3)
()에 숫자를 넣으면 그 번째의 셀렉터가 선택됨
>:nth-last-child(3)
()에 숫자를 넣으면 마지막에서부터 셀렉터가 선택됨
apple:first-of-type
같은 요소에서 첫번째꺼 찾기
plate:nth-of-type(even)
같은 요소에서 넣은 숫자만큼의 번수를 찾는다
even을 넣으면 홀수, odd를 넣으면 짝수를 선택해준다.
:nth-of-type(2n+3)
.small:only-of-type
.small:last-of-type
bento:empty
:not(.small, plate, pickle)
()에 있는거 빼고
[for]
같은 속성이 있는 것들을 선택
[]에 속성을 넣어서 선택함
plate[for]
깉은 태그에 같은 속성 선택
[]에 속성을 넣어서 선택함
[for="Vitaly"]
속성중에 "" 원하는 요소가 들어가 있는 태그 선택
[for^="Sa"]
속성중에 "" 원하는 요소 중에 시작하는 같은글자가 특정 단어가 들어가 있는 것을 선택함
[for$="ato"]
속성중에 "" 원하는 요소 중에 끝나는 같은글자가 들어가 있는 것을 선택함
[for*="obb"]
속성중에 "" 원하는 요소 중에 중간에 들어가는 같은글자가 있는 것을 선택함
끝!
