부모 자식 선택자

CSS

부모 자식 선택자

Crucifi 2019. 7. 13. 10:32

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

첫번째로 코드안에 있는 모든 <ul>태그와 <li>태그의 색상을 부여합니다.

 ul li{
        color:yellow;
      }

그러면

    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>

이부분이 전부 yellow색상으로 변경됩니다.

그 다음에 부모자식 연산자와 친구연산자를 사용합니다.

아래 선택자는 #ggg 바로 밑에 있는 li만을 선택합니다.

#ggg>li{
        border:1px solid red;
      }

친구연산자를 사용합시다.

실제로 (이런말은없습니다.) 아래 코드는 ul과 ol을 동시에 선택합니다.

 ul,ol{
        background-color:tomato;
      }

위에 있는 부분적으로 떨어져 있는 코드들을 합치면

<!DOCTYPE html>
<html>
  <head>
    <style>
      ul li{
        color:yellow;
      }
      #ggg>li{
        border:1px solid red;
      }
      ul,ol{
        background-color:tomato;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
    <ol id="ggg">
      <li>HTML</li>
      <li>CSS
        <ol>
          <li>selector</li>
          <li>declaration</li>
        </ol>
      </li>
      <li>JavaScript</li>
    </ol>
  </body>
</html>

이런식으로 코드를 나타낼 수 있습니다.

<ol>태그로 순서를 표현한 뒤에 2번 css라는 텍스트안에 또 다른 <ol>태그를 사용해 selector,declation에 또 순서로 따로 표현을 합니다. 그리고 앞서 선언하였던 #ggg를 이용해 빨간색의 테두리선을 표현을 했습니다.

여기까지가 부모자식 선택자입니다.