부모 자식 선택자 (생활코딩)

ul li {color : red ;}

ul 태그의 부분에 해당하는 li 태그만을 붉은 색으로

<ol> 태그가 두개이기 때문에

<head> <style> 태그에서 CSS언어로 지정해도

반응이 없기 때문에

ol의 id 값을 lecture로 주는 것.

<head>

<style>

#lecture>li border : 1px solid red;

</style>

</head>

자손 태그인 li 에 테두리 1px 단선 빨간색으로 지정.

#을 붙인다.

예제 - 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. 조상 자손 선택자

ul 아래의 모든 li 태그를 선택해서 색 : 빨강

2. 부모 자식 선택자

lecture 바로 밑의 li 선택, 테두리

3. 자식 자식 선택자

서로 대등함, 배경 색.

'코딩' 카테고리의 다른 글

가상 클래스 선택자 (0)	2017.02.16
선택자 공부 팁 (0)	2017.02.16
선택자의 종류 (0)	2017.02.16
선택자와 선언 (0)	2017.02.16
HTML과 CSS가 만나는 법 (0)	2017.02.15