[CSS] 선택자 - 결합자

 

결합자

 

 

자손 결합자

<div class="box border-box">box1
  <p class="text">text</p>
</div>

<div class="div1">Hello
  <div class="div2">Bye</div>
</div>

div {
  border: 10px solid black;
}

.box.border-box .text { // 자손 결합자
  color: red;
}

div div {  // 자손 결합자
  color: green;
}

공백(띄어쓰기)을 이용해 두 개 이상의 선택자를 조합하는 형태로 표현할 수 있다.

뒤쪽 선택자 요소의 부모선택자가 존재할경우 사용한다. (부모, 부모의 부모, 부모의 부모의 부모...)

뒤에 작성한 선택자부터 그 이하의 모든 선택자들에 스타일을 적용한다.

 

쉼표( , )를 이용해 작성하는 그룹 선택자는 모든 선택자에 스타일이 적용된다는 점에서 차이라고 볼 수 있다.

그룹 선택자 링크 : https://imcoding.tistory.com/46

[CSS] 선택자 - 그룹 선택자 사용법

 

 

 

자식 결합자

<div>
  <span>Span #1, in the div.
    <span>Span #2, in the span that's in the div.</span>
  </span>
</div>
<span>Span #3, not in the div at all.</span>

span {
  background-color: gray;
}

div > span {
  background-color: DodgerBlue;
}

" > (꺽새) " 로 표시한다.

자손결합자가 뒤에 작성한 선택자 이하의 모든 선택자에 스타일을 적용한다면,

자식 결합자는 앞쪽 선택자 요소의 바로 아래 선택자에만 적용한다는 점에서 더 엄격하다.

 

 

 

일반 형제 결합자

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

ul {
  li ~ li {
    color: red;
  }
}

두 선택자 사이에 " ~ (물결) " 로 표시한다.

뒤쪽 선택자의 요소와 앞쪽 선택자 요소의 부모 요소가 같아야 한다.

앞쪽 선택자를 제외하고 뒤쪽 선택자 부터 그 이하에 있는 모든 선택자들에 스타일을 적용한다.

 

 

 

인접 형제 결합자

<div>
  <h1>h1 title</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>

div {
  h1 + p {
    color: red;
  }
}

두 선택자 사이에 " + (더하기) " 로 표시한다.

앞쪽 선택자의 바로 뒤에 오는 인접한 뒤쪽 선택자 하나에만 스타일을 적용한다.