[CSS] CSS 복합 선택자

CSS 선택자에는 크게 일반 선택자, 복합 선택자, 가상 클래스 선택자, 가상 엘리먼트 선택자, 속성 선택자가 있다.

복합 선택자에는 자식 선택자, 하위 선택자, 인접 형제 선택자, 일반 형제 선택자가 있다.

1.자식 선택자 element1 > element2{}

자식 선택자는 1단계 하위 요소에만 적용 된다. 아래 예시에서 div 바로밑에 있는 p에만 적용되고, div > div > li > p 이 부분은 적용되지 않는다.
ex)
css div > p {}
html <div>
<p> div child paragraph </p>
<div>
<li> <p>div child div child li child p </p></li>
</div>
</div>

2.하위 선택자 element1 element2{}

하위 선택자는 1단계 하위 요소와 2단계 이상의 요소에도 모두 적용된다.
자식 선택자와 다르게 하위에 있으면 모두 적용된다.
div > p, div > li > p 모두 적용된다.
ex)
css div p {}
html <div>
<p> div child paragraph </p>
<div>
<li> <p> div child div child li child p </p></li>
</div>
</div>

element 이름을 가지고 태그를 선택한다.
elementName 대신 태그이름 즉 h1 같은 태그가 들어간다.
여러 개의 엘리먼트를 선택할 수 있다
ex)
css h1, p{}
html <h1> type selector </h1>
<p> multiple selection </p>

3.인접 형제 선택자 element1 + element2{}

인접한 형제 엘리먼트중 가장 가까운 엘리먼트 1개만 선택한다.
형제 엘리먼트는 동일한 레벨에 있는 엘리먼트를 의미한다.
아래에서는 인접형제 1만 선택된다.
ex)
css div + p {}
html <body>
<div> 인접형제 선택자 </div>
<p> 인접형제 1<p>
<p> 인접형제 2<p>
</body>

4.일반 형제 선택자 element1 ~ element2{}

형제 엘리먼트가 여러개 존재할 경우가 모두를 선택한다.
인접형제 1, 2가 모두 선택된다.
ex)
css div ~ p{}
html <body>
<div> 인접형제 선택자 </div>
<p> 인접형제 1<p>
<p> 인접형제 2<p>
</body>