CSS Child Combinator(자식 선택자)

CSS 자식 선택자

자식선택자는 부모와 자식관계를 가진 HMTL 태그 의 모습을 조합해서 만들 수 있는 선택자입니다.

자식 선택자의 문법은 하기와 같습니다.

 

부모태그 > 자식 태그 or 자식 전역속성{

/*스타일*/

}

 

예제를 만들어 보겠습니다.

[index.html]

div 가 부모이고 h2와 p 가 자식인 구조를 만들어 봅니다.

  <div>
    <!-- 자식 선택자 -->
    <h2 id="BC">This is a Child Combinator.</h2>
    <!-- 태그 와 클래스 선택자 조합  -->
    <h2 class="BC2">This is a Child Combinator.</h2>
     <!-- 태그, 클래스 그리고 아이디 선택자 조합  -->
     <h2 class="BC2" id="Bid">This is a Child Combinator.</h2>
    <p>This is a myParagraph.</p>
  </div>

[main.css]

자식 선택자 를 여러 가지 형태로 만들어봅니다. div 부모 태그 > 자식 요소를 형태입니다.

자식 요소를 선택하기 위해서 아이디, 클래스 선택자와 태그, 클래스, 아이디를 조합 그리고 태그 만 가진 요소를 적용해 봅니다. 

  /* CSS 코드 */
  div > #BC{
      color: blue;
  }

  div > .BC2{
    color: yellowgreen;
  }

  div > h2.BC2#Bid{
    color: orangered;
  }

  div > p{
   color: violet;
  }

웹 페이지 결과 화면은 자식 선택자로 지시한 자식 요소들에 정확히 스타일이 씌워진 것을 확인해 볼 수 있습니다.

기본선택자 들과 부모 자식 관계를 잘 활용하여 특정 HTML요소를 선택할 수 있다는 장점이 있습니다.

이상 CSS 자식 선택자였습니다. 감사합니다.

자식 선택자 결과 화면