이진욱의코딩

부모 자식 선택자 본문

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를 이용해 빨간색의 테두리선을 표현을 했습니다.

 

이런식으로 말이죠.

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

'CSS' 카테고리의 다른 글

미디어 쿼리 소개  (0) 2019.07.15
css로 가로 세로 가운데 정렬하기  (0) 2019.07.14
선택자의 종류  (0) 2019.07.13
css의 선택자  (0) 2019.07.13
HTML과 CSS가 만나는 법  (0) 2019.07.13
'CSS' Related Articles more