결합자

결합자 = combinators. 결합자는 두 가지의 선택자를 입력하여 조금 더 명확하게 선택자를 선택할 수 있다.

하위 결합자

상위 요소의 하위 요소 중 기재해놓은 요소가 맞다면 모두 적용된다.

아래 예시에서, li의 하위 요소 li 선택하여 적용.

ul.my-things li {
  margin: 2em;
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}

<ul class="my-things">
  <li>
    <div>Item 1</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
  <li>
    <div>Item 2</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
</ul>

자식 결합자

상위 요소에 포함되는 하위 요소 중 입력된 요소에만 적용된다.

아래 예시에서, div의 하위 span만 선택하여 적용.

span {
  background-color: aqua;
}

div > span {
  background-color: yellow;
}

<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>

인접 형제 결합자

+ 를 이용하여 먼저 입력한 요소의 바로 다음 형제 요소를 선택한다.

아래 예시에서, 첫번째 li의 인접 형제 li 선택하여 적용.

li:first-of-type + li {
  color: red;
}

<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>

일반 형제 결합자

~ 을 이용하여 먼저 입력한 요소의 다음 요소 중 입력한 요소를 선택한다.

아래 예시에서,

p ~ span {
  color: red;
}

<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a red span!</span>
<span>And this is a red span!</span>
<code>More code...</code>
<div> How are you? </div>
<p> Whatever it may be, keep smiling. </p>
<h1> Dream big </h1>
<span>And yet again this is a red span!</span>

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기