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. 코딩혁명
    2021.11.30 감사합니다
  2. 드림보이
    2021.11.09. 부모 자식 선택자 파트 수강완료
  3. 밀보리
    211024 학습완료 감사합니다!
  4. 황금아가리
    211003
  5. 2021.09.22 완료
  6. 이현수
    2021.09.02(목)
  7. 두드
    2021.07.21 완료
  8. 미야자키 무야호
    부모자식 선택자 수업에서요
    #lecture>li{
    border:1px solid red;
    color:blue;
    }
    이 구간에서
    border 끝에 ; 를 넣으면 안되던데 삽입 기준이 있을까요?
  9. 감자먹는넘
    감자
  10. 전예진
    210704
  11. jeisyoon
    2021.06.21 부모 자식 선택자 - OK
  12. 무탕
    2021. 5. 26 완료
  13. Jeong Il Haan
    20210520
  14. barozaqu
    20210518.
  15. 감사히 잘 보았습니다.
  16. 완료~!
  17. gkalsdlf
    ㅇㄹ!~
  18. Minint
    2021.02.28
  19. HyeonHui Jeong
    2021216
  20. sunghun328
    210210
  21. 스마일가이
    2021.01.26 완료 감사합니다
  22. datsciseol
    20210115
  23. 2NG(이엔지)
    아유, 별말씀을요! 화이팅입니다. 좋은 하루 되세요. ^^
    대화보기
    • 따뜻한츄르
      201229
    • Gili
      201223 ✅
    • 몽실엄마
      아..그런거군요.저는 테그랑 관계가 있는건가 했습니다.가르쳐주셔서 고맙습니다.
      대화보기
      • 티치
        2020.12.21
      • 2NG(이엔지)
        ㄴ몽실엄마님

        그냥 아무 이름이나 붙인 것으로 보입니다. 의미는 따로 없다고 생각하셔도 될 것 같아요.
        이전에는 Selector(선택자)에 대한 이야기를 하던 중이었으니 select로 이름을 붙인거고
        이번에는 그냥 아무 의미없이 강의(lecture) 중이었으니 lecture로 붙이신거라 생각합니다.
        저도 같은 의문이 들었었고, 그래서 일부러 다른 이름으로 붙여가면서 했었어요.
        (id="special" 이라든지 id="suntag" 이라든지..ㅎㅎ
        대화보기
        • 몽실엄마
          저는 왜 테두리가 다 안쳐지지 하고 있었는데 그 부분 </li>를 밑으로 안옮긴걸 src님 글 보고 깨달았습니다.고맙습니다.
          대화보기
          • 201213
            <ol id="lecture">
            <li>HTML</li>
            <li>CSS
            <ol>
            <li>selector</li>
            <li>declaration</li>
            </ol>
            </li> 이렇게 안하고

            <ol id="lecture">
            <li>HTML</li>
            <li>CSS </li>
            <ol>
            <li>selector</li>
            <li>declaration</li>
            </ol>

            라고 하면 두번째 ol태그에 파란 글씨가 적용되지 않네요... 더 큰 태그에 묶이고 안묶이고가 큰 차이를 보이는 것이 신기합니당
          • 몽실엄마
            잘 들었습니다. 근데 id="select" , id="lecture" 의 차이는 멀까요..
          • Seunghyuk Rodrigo Kim
            감사합니다
          • switpotato
            20201122: 2차학습 완료
          • 켄드릭
            2020년 10월 29일(목) 15:09 1차 학습완료
          • Hyuk-Jin
            2020.10.26
          • jaehyunlee
            완료
          • 오석민
            완료
          • 오석민
            좋은 설명이네요 ㅎㅎ
            대화보기
            • 박병진
              2020.10.01 추석 완료
            • 콜라
              20200926완료
            • 여니여니
              200920 감사합니다
            • 공략너구리
              꿀잼..
            • switpotato
              20ㅈ00824 완료감사합니다!
            • 김성곤
              20200717 감사합니다!
            • jaehyunlee
              완료
            • 한강
              부모 자손
              부모>자식
              형제, 자매
              오늘도 시작합니다 200527
            • 노래하는프로그래머
              완료!
            • 예제공부로 다시듣기
            • 완료
            • opper
              수업 완료
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기