본문 바로가기
웹(Web)/CSS

부모 자식 선택자

by 지하생활자 2021. 4. 15.

ol>li 이렇게 하면 ol의 바로 밑에 있는 li에 대해서만 선언이 적용된다

#lecture>li라고 하면 id값이 lecture인 선택자 바로 밑에 있는 li에 대해서만 선언이 적용된다

 

 

 

 

 

<!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>

 

 

 

 


A+B
A~B
A

'웹(Web) > CSS' 카테고리의 다른 글

가상 클래스 선택자  (0) 2021.04.15
선택자 공부 팁  (0) 2021.04.15
선택자의 종류  (0) 2021.04.15
선택자와 선언  (0) 2021.04.15
선택자  (0) 2021.04.15

댓글