생활코딩

Coding Everybody

코스 전체목록

닫기

부모 자식 선택자

어떤 태그의 하위에 있는 태그를 선택하고 싶을 때는 좀 더 복합적인 선택자를 사용하게 됩니다. 여기서는 부모 태그 아래에 있는 자식 태그를 선택하는 몇가지 방법을 알아보겠습니다. 

조상 자손 선택자

아래의 태그는 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. switpotato
    20201122: 2차학습 완료
  2. 켄드릭
    2020년 10월 29일(목) 15:09 1차 학습완료
  3. Hyuk-Jin
    2020.10.26
  4. jaehyunlee
    완료
  5. 오석민
    완료
  6. 오석민
    좋은 설명이네요 ㅎㅎ
    대화보기
    • 박병진
      2020.10.01 추석 완료
    • 콜라
      20200926완료
    • 여니여니
      200920 감사합니다
    • 공략너구리
      꿀잼..
    • switpotato
      20ㅈ00824 완료감사합니다!
    • 김성곤
      20200717 감사합니다!
    • jaehyunlee
      완료
    • 한강
      부모 자손
      부모>자식
      형제, 자매
      오늘도 시작합니다 200527
    • 노래하는프로그래머
      완료!
    • 예제공부로 다시듣기
    • 완료
    • 수업 완료
    • 무지개반사
      완료
    • 2020.01.04
    • 문병민
      완료
    • 없으면안돼요
      수강완료
    • Grigo
      완료
    • Starkiki
    • alpha
      191001 수강완료
    • 태태
      수강완료
    • 치디우기
      2019/08/26 수강완료
    • 류석현
      수강완료! 꺽새부분이 조금 어려웠네요!
    • 2019 0727 완료
    • 다나가
      190718 - 완료!!
    • 김주엽
      수업완료
    • 잘될자
      190502 목요일 수강완료.
    • 박지성
      기침이 심각한게 아닌가 하는 걱정이 들었기 때문에
    • 홍명교
      2019.4.16. 완료
    • zackinsu
      완료
    • 노혜주
      완료
    • lygon
      2019-02-22 완료
    • 한승민
      190215
    • 네 저도 의미상 그게 맞다고 생각하고 이고잉님도 취지는 그렇다고 설명하셨습니다. 그런데 이경우 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시
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기