코딩정보 공유방
/
회고팀 15 - 감자바쓰🙏🏻
/
좌창화
/
2주차(06/20)
/
html/css
/
결합자
Search
🧩
결합자
1.
자손 결합자
(공백) 결합자는 첫 번째 요소의 자손인 노드를 선택합니다.
구문:
A B
예제:
div span
은
<div>
요소 안에 위치하는 모든
<span>
요소와 일치합니다.
2.
자식 결합자
>
결합자는 첫 번째 요소의 바로 아래 자식인 노드를 선택합니다.
구문:
A > B
예제:
ul > li
는
<ul>
요소 바로 아래에 위치하는 모든
<li>
요소와 일치합니다.
3.
일반 형제 결합자
~
결합자는 형제, 즉 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.
구문:
A ~ B
예제:
p ~ span
은
<p>
요소를 뒤따르는 모든
<span>
요소와 일치합니다.
4.
인접 형제 결합자
+
결합자는 인접 형제, 즉 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.
구문:
A + B
예제:
h2 + p
는
<h2>
바로 뒤에 위치하는
<p>
요소와 일치합니다.
5.
열 결합자 (en-US)
Experimental
||
결합자는 같은 열에 속하는 노드를 선택합니다.
구문:
A || B
예제:
col || td
는
<col>
의 범위에 속하는 모든
<td>
요소와 일치합니다.