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. 강지후
    강의 완료 20170712
  3. yuhyun
    CSS(style) 속성에 따른 고유한 특성이 있는데

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

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

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

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

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