pseudo class

모든 child element들이 같을때 pseudo class가 우리가 생각하는 직관적인 방식으로 작동한다. parent element 밑에 여러 겹의 child element 들이 있을땐 pseudo class가 조금 더 복잡하게 작동한다. 예를 들면

<article>
<header>
<h2></h2>
<p>
</p>
<header>
</article>

...

[in style.css]
article p:first-child{
font-weight : bold;
}

이럴 경우 paragraph의 폰트 굵기가 굵어지는 효과가 발생할거라고 기대하지만 실제로는 그렇지 않다. 왜냐하면 article의 first-child는 paragraph가 아닌 header이기 때문이다.

 

[in style.css]
article first-child{
font-weight : bold;
}

하지만 위와 같은 경우에는 paragraph의 폰트 굵기가 굵어진다. 아리송하다.. 계속 알아봐야 할 거 같다.