자손 선택자 : 선택자A
선택자B
자손 선택자(Descendant combinator, 띄어쓰기 공백)는
앞에서 지정한 요소의 타깃 자손 요소를 모두 선택합니다.
선택자A 선택자B
형태의 선택자로,
두 개의 복합 선택자를 구분하는 띄어쓰기(" "
, 공백)가 있으며 선택자A
요소 안에 위치한 타깃 자손 요소인 선택자B
를 모두 선택합니다.
(자손이란 자식, 자식의 자식, 자식의 자식의 자식... 등 모든 자손을 의미합니다.)
구문
예제 -1
자손 선택자
p 요소입니다.
앞에서 지정한 div 요소의 타깃 자손 요소인 p를 모두 선택합니다.
앞에서 지정한 div 요소의 타깃 자손 요소인 p를 모두 선택합니다.
article
앞에서 지정한 div 요소의 타깃 자손 요소인 손자 p도 선택합니다.
예제 -2
-
아이템 li
- 서브아이템 li li
- 서브아이템 li li
-
아이템 li
- 서브아이템 li li
- 서브아이템 li li
자식 선택자 : 선택자A >
선택자B
앞에서 지정한 요소의 자식 요소만를 모두 선택하려면 자식 선택자(Child combinator combinator, >
)를 사용하세요.
(자식이란 직계 자식만을 의미합니다. 자식의 자식, 자식의 자식의 자식.. 등의 자손을 의미하지 않습니다.)
구문
예제
자식 선택자
p 요소입니다.
앞에서 지정한 div 요소의 타깃 자식 요소인 p를 모두 선택합니다.
앞에서 지정한 div 요소의 타깃 자식 요소인 p를 모두 선택합니다.
article
손자 p는 선택하지 않습니다.
브라우저 호환성
선택자 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
선택자A 선택자B
|
1 | 12 | 1 | 1 |
명세서
명세서 사양 | |
---|---|
선택자A 선택자B
|
Selectors Level 4 #descendant-combinators |