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. jeisyoon
    2021.06.21 부모 자식 선택자 - OK
  2. 무탕
    2021. 5. 26 완료
  3. Jeong Il Haan
    20210520
  4. barozaqu
    20210518.
  5. 감사히 잘 보았습니다.
  6. 완료~!
  7. gkalsdlf
    ㅇㄹ!~
  8. Minint
    2021.02.28
  9. HyeonHui Jeong
    2021216
  10. sunghun328
    210210
  11. 스마일가이
    2021.01.26 완료 감사합니다
  12. datsciseol
    20210115
  13. 2NG(이엔지)
    아유, 별말씀을요! 화이팅입니다. 좋은 하루 되세요. ^^
    대화보기
    • 따뜻한츄르
      201229
    • 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
              수업 완료
            • 무지개반사
              완료
            • Blanc
              2020.01.04
            • 문병민
              완료
            • 없으면안돼요
              수강완료
            • Grigo
              완료
            • Starkiki
            • alpha
              191001 수강완료
            • 태태
              수강완료
            • 치디우기
              2019/08/26 수강완료
            • 류석현
              수강완료! 꺽새부분이 조금 어려웠네요!
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기