css 결합자

결합자

• 결합자는 규칙에 따라 선택자들을 결합하여 세밀하게 찾을 수 있게 도와준다.

결합자의 종류

• 자손 결합자 (A B)
• 자식 결합자 (A > B)
• 일반 형제 결합자 (A ~ B)
• 인접 형제 결합자 (A + B)

자손 결합자(A B)

부모 A의 자손들중 B들을 선택한다.

자식 결합자(A > B)

부모 A의 자식들중 B들을 선택한다.

자손 과 자식의 차이?

자식은 자손에 포함 되어 있는 관계로
자식은 직계 자손을 뜻 한다.

아래 예를 살펴 보자.

 <div>
	<p>div의 자식 이면서 자손</p>
	<span>
		<p>div의 자손</p>
	</span>
</div>

css를 이렇게 주면 모두다 변할것이다
div p {
  color: red;
}

그렇지만

css를 이렇게 준다면?
div > p {
  color: blue;
}

이렇게 직계 자손인 자식만 색칠된다. 이것이 자손과 자식(직계 자손)의 차이다

일반 형제 인접자(A ~ B)

형제들 중 앞에 선택한 A선택자 뒤에 오는 B선택자들을 선택한다.
떨어져도 적용이 된다.

      <p>P</p>
      <span>span 
      	<p>P</p>
      </span>
      <p>P</p>

      <div>
        <span>서로 </span>
        <div>떨어져도</div>
        <p>적용</p>
      </div>
      
CSS
span ~ p {
  color: green;
}

코드가 이렇게 된다 했을때 span뒤에 있는 같은 계층의 p만 칠해진다.

인접 형제 결합자 (A + B)

형제들 중 앞에 선택한 A선택자 바로 뒤에 오는 B선택자를 선택한다.

      <p>P</p>
      <span>span 
      	<p>P</p>
      </span>
      <p>P</p>

      <div>
        <span>서로 </span>
        <div>떨어지면</div>
        <p>적용 안됌</p>
      </div>
      
CSS
span + p {
  color: green;
}

span 과 붙어있는 P만 선택 된걸 볼 수 있다.