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만 선택 된걸 볼 수 있다.
Author And Source
이 문제에 관하여(css 결합자), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hongdol/css-결합자저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)