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. 네 저도 의미상 그게 맞다고 생각하고 이고잉님도 취지는 그렇다고 설명하셨습니다. 그런데 이경우 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
              영상 감사합니다!
            • 180101 감사합니다!
            • 김성인
              감사합니다!
            • 뀨우
              감사히 잘봤습니다.
            • egoing
              음 일단 알아두시면 곧 왜 필요하신지 알게 될 것 같습니다. ^^ 이게 없으면 모든 태그에 id와 class를 붙여야 하거든요.
              대화보기
              • Calssess
                이 내용은 최적화의 문제로 생긴건가요? 굳이 class나 id가있는데 이 선택자의 이유를 찾지 못하겠어서요
              • 푸른하늘
                9일차 공부 감사합니다
              • 이경일
                '>'를 이용해서 부모자식 선택자를 이용할 수 있다.
                태그의 id 속성지정으로 직계자손만 효과를 적용하게 할 수도 있다.
                ',' 콤마를 이용해서 대등한 관계의 선택자를 이용할 수 있다.
              • 오빠는다르다
                감사합니다~!!
              • 강지후
                강의 완료 20170712
              • yuhyun
                CSS(style) 속성에 따른 고유한 특성이 있는데

                color는 자손에도 특성이 상속된다.
                border는 안된다.
                ->지금은 몰라도 된다. 나중에 자손에도 상속이 되는 속성을 배운다.

                ul,ol은 border를 주었을때 숫자나 점 같은건 포함 안된다. 왜 그럴까 ?왜 그럴까?
                -> 그냥 border속성의 특성인거 같다.
                ul,ol에 background-color를 주었는데 숫자나 점같은거 포함 백그라운드가 채워진다.왜 그럴까? 왜 그럴까?
                ->그냥 background-color속성의 특성인거 같다.
              • 선택자쓸때 "띄어쓰기"하면
                ul 바로 밑에 있는 li 선택됨

                >, ol 바로 밑에 잇는 li 를 선택

                컬러는 다른 곳에도 적용되는 속성 있음 (보더는 한정)

                ul,ol (콤마하면 똑같이 적용)
              • 쿠쿠다스
                감사합니다 ㅎ
              • 14번째
                5.6.
              • php가 첫취업?
                2017-04-30
              • 해커가꿈인사람
                0415완료
              • 미니밥통
                감사합니다.
              • 광뀨
                0209 완료
              • jgatsby
                ul li - 부모과 자손의 관계
                ul>li - 부모와 직계 자식의 관계
                ul, li -
              • matheios
                강의 잘 듣고 있습니다~ 감사합니다~!
              • 얄루
                2017.01.02 수강완료
              • 임지호
                좀 더 심화된 선택자의 형태
                ul li {...} : 상위 태그 띄워쓰고 하위 태그의 형태. 상위 태그 밑에 모든 하위 태그들에 디자인 적용
                ul>li {...} : 상위 태그 > 하위 태그의 형태. 상위 태그 바로 하나 밑에 하위 태그에만 디자인 적용
                ul,ol {...} 상위태그,하위태그의 형태. 단순 열거. ul에도 적용하고 ol에도 똑같은 디자인 적용
              • 활화산
                li 하위 li 에는 border가 안 그려지네요(border 밖에 위치, 상위 li 에만 달랑 border가 그려짐
              • 최현승
                161008완료
              • 신병국
                2016.8.27 완료 ! 재미있어요 고잉형님 항상 감사합니다!
              • 김종엽
                2016.08.25 완료!
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기