CSS - derive_selector (파생 선택자)

yeong ·2022년 11월 10일

css

목록 보기
6/34

후손 선택자 : 부모 엘리먼트를 기준으로 모든 깊이의 엘리먼트(후손 엘리먼트) 선택
형식) 선택자(부모) 선택자(후손

자식 선택자 : 부모 엘리먼트를 기준으로 첫번째 깊이의 엘리먼트(자식 엘리먼트) 선택
형식) 선택자(부모) > 선택자(자식)

필터 선택자 : 선택된 다수의 엘리먼트 중 특정 엘리먼트 선택
필터 선택자는 클래스 선택자를 이용해야만 구현 가능
형식) 선택자.클래스선택자

형제 선택자 : 선택된 하나의 엘리먼트 다음에 위치한 같은 깊이의 모든 엘리먼트 선택
형식) 선택자 ~ 선택자

인접 형제 선택자 : 선택된 하나의 엘리먼트 다음에 위치한 같은 깊이의 첫번째 엘리먼트 선택
형식) 선택자 + 선택자





#### 각각의 예시 (body태그 작성값은 생략) (#은 아이디 속성값을 표시하기위한 문자)
후손 선택자 
#super1 div { color: purple; }

자식 선택자 
#super2 > div { color: gold; }

필터 선택자
#super3 div { color: orange; }
#super3 div.choice { color: lime; }

형제 선택자
#p1 ~ p { color: fuchsia; }

인접 형제 선택자
#p1 + p { color: red; }

0개의 댓글