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. SlowStarter
    감사합니다!
  3. 스페이스몽키
    감사합니다! 열심히 따라가겠습니다다
  4. 스페이스몽키
    감사합니다! 열심히 따라가겠습니다
  5. Ryan.L
    영상 감사합니다!
  6. 180101 감사합니다!
  7. 김성인
    감사합니다!
  8. 뀨우
    감사히 잘봤습니다.
  9. 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 자세히 보기