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. 잘될자
    190502 목요일 수강완료.
  3. 박지성
    기침이 심각한게 아닌가 하는 걱정이 들었기 때문에
  4. 홍명교
    2019.4.16. 완료
  5. zackinsu
    완료
  6. 노혜주
    완료
  7. 2019-02-22 완료
  8. 한승민
    190215
  9. 네 저도 의미상 그게 맞다고 생각하고 이고잉님도 취지는 그렇다고 설명하셨습니다. 그런데 이경우 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 속성지정으로 직계자손만 효과를 적용하게 할 수도 있다.
                ',' 콤마를 이용해서 대등한 관계의 선택자를 이용할 수 있다.
              • 오빠는다르다
                감사합니다~!!
              • 강지후
                강의 완료 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완료
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기