CSS Selector

이성훈·2024년 7월 26일

CSS

목록 보기
7/9
post-thumbnail

CSS Diner

https://flukeout.github.io/

인접 형제 셀렉터 A + B

A 요소의 바로 다음에 위치하는 형제 B 요소를 선택한다.
-CSS Diner 12번

일반 형제 결합자 A ~ B

같은 부모를 가진 형제 요소 중 A 요소 뒤에 위치하는 모든 B 요소를 선택한다.
-CSS Diner 13번

:nth-of-type(An+B) (n은 0 이상의 정수)

같은 타입의 형제 요소 중에서 An+B 번째에 위치한 요소를 선택한다.
예를 들어 :nth-of-type(2n+1)는 첫 번째, 세 번째, 다섯 번째 요소 등을 선택
-CSS Diner 22번

:only-of-type

해당 타입 중 외동인 요소를 모두 선택한다.
-CSS Diner 23번

:empty

해당 타입 중 자식이 없는 요소를 모두선택

[attribute]

attribute 속성을 가진 요소를 모두 선택한다.
-CSS Diner 27번

A[attribute]

A 요소들중 attribute에 해당하는 속성을 가진 요소를 모두 선택한다.
ex) plate[for] : plate 중 'for'이라는 속성을 가진 요소를 모두 선택한다.
-CSS Diner 28번

[attribute="value"]

attribute가 value인 요소들을 모두 선택한다.
-CSS Diner 29번

[attribute^="value"], [attribute$="value"], [attribute*="value"]

attribute가 value로 시작, , 포함하는 요소들을 모두 선택한다.
ex) [for="Sa"] for 속성에 해당하는 값이 Sa로 시작하는 요소 모두 선택
-CSS Diner 30~32번

profile
프론트엔드 정리

0개의 댓글