CSS 컨텍스트 셀렉터

컨텍스트 셀렉터는 공백 문자 (' ')를 사용하는 명령으로, 지정된 부모 요소 내에 중첩된 태그를 선택할 수 있게 해줍니다.

문법

css셀렉터1 셀렉터2 {
  
}

예제

div 태그 안에 있는 모든 p 태그를 선택하여 빨간색으로 칠해 봅시다:

html<div>
  <p>
    텍스트
  </p>
  <p>
    텍스트
  </p>
</div>

cssdiv p {
  color: red;
}

Результат:

예제

#elem 아이디를 가진 요소 내부의 모든 p 태그를 선택하여 빨간색으로 칠해 봅시다:

html<div id="elem">
  <p>
    텍스트
  </p>
  <p>
    텍스트
  </p>
</div>

css#elem p {
  color: red;
}

Результат:

예제

.block 클래스를 가진 요소 내부의 모든 p 태그를 선택하여 빨간색으로 칠해 봅시다:

html<div class="block">
  <p>
    텍스트
  </p>
  <p>
    텍스트
  </p>
</div>

css.block p {
  color: red;
}

Результат:

예제

div 태그 안에 있는 p 태그 내부의 모든 b 태그를 선택하여 빨간색으로 칠해 봅시다:

html<div>
  <p>
    텍스트 <b>+</b>
  </p>
</div>

cssdiv p b {
  color: red;
}

Результат:

함께 보기