CSS Selector, 결합자 / 복합 선택자 (Combinators)

결합자 / 복합 선택자 (Combinators)

• 일치 결합자(Basic Combinator)

         동시에 만족하는 요소 선택

 

span.orange {
    color : red;
}

<div>
    <span>이건 오렌지가 아닙니다!</span>
    <p>이건 오렌지가 아닙니다!</p>
    <p>
    	<span class="orange">이건 오렌지 입니다!!</span>    
    </p>
</div>

         태그 선택자 span을 찾아 클래스 선택자 orange를 선택

 

 

• 자손 결합자 (Descendant Combinator)

         selectorA 하위의 모든 selectorB 요소

 

div span {
	color: red,
}

<div>
    <span>이건 빨강입니다!</span>
    <p>이건 빨강이 아닙니다.</p>
    <p>
    	<span>이건 빨강입니다!</span>    
    </p>
</div>

 

 

• 자식 결합자(Child Combinator)

         selectorA 바로 아래 selectorB 요소

 

div > span {
	color: red,
}

<div>
    <span>이건 빨강입니다!</span>
    <p>이건 빨강이 아닙니다.</p>
    <p>
    	<span>이건 빨강이 아닙니다.</span>    
    </p>
</div>

 

 

• 일반 형제 결합자(General Sibling Combinator)

         selectorA 형제 요소 중 뒤에 위치하는 selectorB 요소를 모두 선택

 

p ~ span {
	color: red,
}

<div>
    <span>p태그 앞에 있기 때문에 이건 빨강이 아닙니다.</span>
    <p>여기 문단이 있습니다.</p>
    <b>그리고 코드도 있습니다.</b>
    <span>p태그와 형제이기 때문에 이건 빨강입니다!</span>
    <b>더 많은 코드가 있습니다.</b>
    <span>이것도 p태그와 형제이기 때문에 빨강입니다!</span>
</div>

 

 

• 인접 형제 결합자(Adjacent Sibling Combinator)

         selectorA 형제 요소 중 바로 뒤에 위치하는 selectorB 요소를 선택

 

p + span {
	color: red,
}

<div>
    <span>p태그 앞에 있기 때문에 이건 빨강이 아닙니다.</span>
    <p>여기 문단이 있습니다.</p>
    <span>p태그와 인접한 형제이기 때문에 이건 빨강입니다!</span>
    <b>그리고 코드가 있습니다.</b>
    <span>p태그와 인접한 형제가 아니기 때문에 이건 빨강이 아닙니다.</span>
</div>