선택자_복합

go min seok·2022년 3월 11일

목록 보기

2/12

(ABCXYZ)

span .orange {
  color: red;
}

선택자 ABC와 XYZ를 동시에 만족하는 요소 선택

(ABC > XYZ)

ul > .orange {
  color: red;
}

선택자 ABC의 자식요소 XYZ 선택

(ABC XYZ)

HTML

<div>
    <ul>
      <li></li>
      <li></li>
      <li class="orange">오렌지</li>
    </ul>
  </div>

CSS

ul .orange {
  color: red;
}

선택자 ABC의 하위 요소 XYZ 선택
'띄어쓰기'가 선택자의 기호!

(ABC + XYZ)

HTML

<body>
  <ul>
    <li>딸기</li>
    <li>수박</li>
    <li class="orange">오렌지</li>
    <li>망고</li>/*선택*/
    <li>사과</li>
  </ul>
</body>

CSS

.ornage + li {
  color: red;
}

선택자 ABC의 다음 형제 요소 XYZ 하나를 선택

(ABC ~ XYZ)

HTML

<body>
  <ul>
    <li>딸기</li>
    <li>수박</li>
    <li class="orange">오렌지</li>
    <li>망고</li>
    <li>사과</li>
  </ul>

CSS

.ornage ~ li {
color: red;
}

선택자 ABC의 다음 형제 요소 XYZ 모두를 선택

CSS