CSS

부모 자식 선택자

어떤 태그의 하위에 있는 태그를 선택하고 싶을 때는 좀 더 복합적인 선택자를 사용하게 됩니다. 여기서는 부모 태그 아래에 있는 자식 태그를 선택하는 몇가지 방법을 알아보겠습니다. 

조상 자손 선택자

아래의 태그는 ul 밑에 있는 모든 태그를 선택합니다.  

ul li{
    color:red;
}

부모 자식 선택자

 아래 선택자는 #lecture 바로 밑에 있는 li만을 선택합니다. 

#lecture>li{
    border:1px solid red;
}

친구 선택자

(이런 용어는 없습니다)  아래 코드는 ul과 ol을 동시에 선택합니다.

ul,ol{
    background-color: powderblue;
}

예제 - parent_selector_selector_1.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      ul li{
        color:red;
      }
      #lecture>li{
        border:1px solid red;
      }
      ul,ol{
        background-color: powderblue;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
    <ol id="lecture">
      <li>HTML</li>
      <li>CSS
        <ol>
          <li>selector</li>
          <li>declaration</li>
        </ol>
      </li>
      <li>JavaScript</li>
    </ol>
  </body>
</html>

댓글

댓글 본문
  1. 예제공부로 다시듣기
  2. 완료
  3. 수업 완료
  4. 무지개반사
    완료
  5. 2020.01.04
  6. 문병민
    완료
  7. 없으면안돼요
    수강완료
  8. 완료
  9. Starkiki
  10. 191001 수강완료
  11. 태태
    수강완료
  12. 치디우기
    2019/08/26 수강완료
  13. 류석현
    수강완료! 꺽새부분이 조금 어려웠네요!
  14. 2019 0727 완료
  15. 다나가
    190718 - 완료!!
  16. 김주엽
    수업완료
  17. 잘될자
    190502 목요일 수강완료.
  18. 박지성
    기침이 심각한게 아닌가 하는 걱정이 들었기 때문에
  19. 홍명교
    2019.4.16. 완료
  20. zackinsu
    완료
  21. 노혜주
    완료
  22. lygon
    2019-02-22 완료
  23. 한승민
    190215
  24. 네 저도 의미상 그게 맞다고 생각하고 이고잉님도 취지는 그렇다고 설명하셨습니다. 그런데 이경우 selector와 declaration도 적용된다고 설명하셨습니다.
    대화보기
    • Seungki Jeon
      #lecture > li{ 에서 > 의미는 자식 즉 ol 태그 바로 아래 자식은 li 태그입니다.
      #lecture li{ 로 하면 자식, 자손까지 모두 포함합니다.
      대화보기
      • 네 물론 잘 넣었습니다. 강의를 들어보면 CSS #lecture>li { } 안에 들어있는 내용이 HTML, CSS는 물론
        selector, declaration에도 적용된다고 설명하고 있지만 실지로 해보면 HTML, CSS에만 적용되고 selector, declaration에는 적용이 안됩니다.
        대화보기
        • 윤혜인
          윈도우 크롬기준으로 #lecture>li 에서 {border:1px solid blue;} 로 설정하면 제대로 동작합니다. 혹시 부모 선택자 대상 태그에 id 속성 값을 "lecture"로 잘 넣으신 것 맞나요?
          대화보기
          • 윈도우 크롬기준으로
            #lecture>li에서 color:blue;를 했을때도 selector와 declaration은 적용되지 않네요. 그동안 표준이 바뀐건지 브라우저 버전이 올라가면서 바뀐것인지 모르겠지만 강의 내용과 상이합니다.
          • 숨이
            완료햇습니당
          • 완료
          • 김민영
            완료
          • 김민영
            완료
          • 으하핫
            lecture>li 붙여 보세요
            대화보기
            • Chang Yeon Lee
              이유는 모르겠는데 #lecture > li 부분에서 > 가 작동하지 않네요.. < 로 바꾸니까 분홍색으로 바뀌면서 역할은 하는데 반대라 원하는 결과가 나오는건 아니고.. >< 방향만 바뀌는데 작동을 하지않는ㄷ이유가....뭔지
            • 김수
              봐또요 7시
            • 퍼블리셔가자
              완료하였씁니다 !
            • 로버트한
              감사합니다.^^
            • 또치
              감사합니다!!
            • SlowStarter
              감사합니다!
            • 스페이스몽키
              감사합니다! 열심히 따라가겠습니다다
            • 스페이스몽키
              감사합니다! 열심히 따라가겠습니다
            • Ryan.L
              영상 감사합니다!
            • JN87
              180101 감사합니다!
            • 김성인
              감사합니다!
            • 뀨우
              감사히 잘봤습니다.
            • egoing
              음 일단 알아두시면 곧 왜 필요하신지 알게 될 것 같습니다. ^^ 이게 없으면 모든 태그에 id와 class를 붙여야 하거든요.
              대화보기
              • Calssess
                이 내용은 최적화의 문제로 생긴건가요? 굳이 class나 id가있는데 이 선택자의 이유를 찾지 못하겠어서요
              • 푸른하늘
                9일차 공부 감사합니다
              • 이경일
                '>'를 이용해서 부모자식 선택자를 이용할 수 있다.
                태그의 id 속성지정으로 직계자손만 효과를 적용하게 할 수도 있다.
                ',' 콤마를 이용해서 대등한 관계의 선택자를 이용할 수 있다.
              • 오빠는다르다
                감사합니다~!!
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기