[React] Child Selectors(css)

<div class="A">

    <h>TEST</h>

 

위와 같은 코드가 있을 때, css에 이상한 코드가 등장했다.

 

.A > h {

  width:....

}

 

Child Selectors

무슨 의미인고~ 찾아보니 '>'문자가 붙은 경우는 'A' class의 바로 하위에 붙는 <h> 태그만 적용되도록 하는 selector였다.

따라서 위의 css는 아래의 코드에서는 적용되지 않는다

 

<div class="A">

   <div>

      <h> 

 

참고로 Child Selector를 중복으로 사용할 수 있기도 한 것 같다.

.A >h > div 를 하면

<div class="A">

  <h>

    <div>

이러한 코드에서도 적용이 되는 듯 하다.

 

 

참고.

일반적인 아래와 같은 Selector는 하위 depth 상관없이 형식만 맞으면 적용이 된다.(Descendant selectors)

.A h {

}

는

<div class="A">

  <h> 

도 동작하고

<div class="A">

  <div>

    <h> 

도 동작한다.

 

 

ref www.w3.org/TR/CSS2/selector.html#child-selectors

Selectors

ref sqlplus.tistory.com/entry/css-Seletor-%EC%97%90%EC%84%9C-%EA%BA%BD%EC%87%A0%EC%9D%98-%EC%9D%98%EB%AF%B8