• 카테고리

    질문 & 답변

  • 세부 분야

    풀스택

  • 해결 여부

    미해결

다음과 같이 복합 선택자를 줄 경우

21.12.31 12:42 작성 조회수 81

1

<html>
  <head>
    <title>CSS 기본 사용법</title>
    <style>
      #test p {
        color: blue;
      }

      #test > p {
        color: red;
      }

      #test > div {
        color: orange;
      }
    </style>
  </head>
  <body>
    <div id="test">
      <p>첫 번째 자식</p>
      <p>첫 번째 자식</p>
      <div>
        <p>두 번째 자식</p>
        <p>두 번째 자식</p>
      </div>
    </div>
  </body>
</html>

두 번째 자식에 오렌지 컬러가 적용되어야 하는 거 아닌가요? 그런데 꼭 #test > div >  p {color: orange} 이렇게 자식클래스를 한번 더 써줘야 컬러가 적용되더라고요.ㅠㅠ 

course-thumbnail

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

css 공부하기 - 2

강의실 바로가기

답변 1

답변을 작성해보세요.

0

그랩님의 프로필

그랩

지식공유자

2022.01.02

#test > div에 color를 적용하더라도 div의 자식인 p 태그의 color에는 직접적으로 영향을 주지 않습니다.

div 자체의 color, 예를 들어 <div>텍스트</div> 이런 경우에 적용이 된다고 보시면 됩니다 :)

이 글과 비슷한 Q&A