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.15 ok
  2. 미래도비
    1.14
  3. 새콤달콤
    완료했습니다
  4. 덕자
    완료!
  5. 부모자식 선택자 완료
  6. DreamBoy
    2023.09.15. CSS - 부모 자식 선택자 파트 완료했습니다.
  7. 다겸란
    수강완료
  8. JH의꿈
    23.8.16 수요일 학습
  9. 고원규
    완료
  10. AgainstartJH
    2022년 11월 03일 목요일 학습완료!
  11. 헤밍웨이
    220822
  12. vigorously27
    2022년 7월 18일 월요일 학습완료!
  13. INJE
    22/03/12
  14. INJE
    03/12
  15. jjy_lee2468
    22.02.03수강완료
  16. 강수빈
    22.1.26 수강완료
  17. 코딩혁명
    2021.11.30 감사합니다
  18. 드림보이
    2021.11.09. 부모 자식 선택자 파트 수강완료
  19. 밀보리
    211024 학습완료 감사합니다!
  20. 황금아가리
    211003
  21. neal
    2021.09.22 완료
  22. 이현수
    2021.09.02(목)
  23. 두드
    2021.07.21 완료
  24. 미야자키 무야호
    부모자식 선택자 수업에서요
    #lecture>li{
    border:1px solid red;
    color:blue;
    }
    이 구간에서
    border 끝에 ; 를 넣으면 안되던데 삽입 기준이 있을까요?
  25. 감자먹는넘
    감자
  26. 전예진
    210704
  27. jeisyoon
    2021.06.21 부모 자식 선택자 - OK
  28. 무탕
    2021. 5. 26 완료
  29. Jeong Il Haan
    20210520
  30. barozaqu
    20210518.
  31. 짜rr
    감사히 잘 보았습니다.
  32. choi
    완료~!
  33. gkalsdlf
    ㅇㄹ!~
  34. Minint
    2021.02.28
  35. HyeonHui Jeong
    2021216
  36. sunghun328
    210210
  37. 스마일가이
    2021.01.26 완료 감사합니다
  38. datsciseol
    20210115
  39. 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차 학습완료
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기