🔵 CSS - 자식필터 선택자

<style>
div.ct14{}
div.ct14>.header{
    text-align: center;
}
div.ct14>.header>h3{}
div.ct14>.header>p{}
div.ct14>.section{}
/* 3개의 자식요소를 모두 선택된 상태 */
div.ct14>.section>.article{
    /* 첫번째 자식요소에게는 mt를 지정하지 않습니다. */
    margin-top: 40px;
}
/* 자식필터 선택자
div:first-child{} - 첫번째 자식위치에 있는 div를 선택
h3:first-child{} - 첫번째 자식위치에 있는 h3를 선택
h5:first-child{} - 첫번째 자식위치에 있는 h5를 선택
-h5요소가 첫번째 자식위치가 아니면 선택되지 않습니다.
:nth-child(n){}
h5:nth-child(2) -  두번쨰 자식 위치에 있는 h5를 선택
*/
div.ct14>.section>.article:first-child{
    margin-top: 0;
}
div.ct14>.section>.article>div{
    float: left;
}
div.ct14>.section>.article:nth-child(2)>div{
    float: right;
}
div.ct14>.section>.article>.image{
    width: 610px; height: 360px; background-color: #999;
}
div.ct14>.section>.article>.texts{
    width: 430px; background-color: #eee;
    /* 2번쨰 아티클에 ml가 적용안되는 이유는 flr를 줘서 무효처리 ; 따로 값을줘야함 */
    margin-left: -90px;
    padding: 40px;
    margin-top: 40px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
}
div.ct14>.section>.article:nth-child(2)>.texts{
    margin-right: -90px;
    text-align: right;
}
div.ct14>.section>.article::after{
    /* 클리어 속성은 블럭에서만 작동학기 때문에 블럭요소로 만들어줌 */
    display: block;
    /* 클리어가 지정되기 위한 영역, 컨텍츠 영역을 만들어줌 */
    content: '';
    /* float의 영향을 해제 */
    clear: both;
}
div.ct14>.section>.article>.texts>h4{}
div.ct14>.section>.article>.texts>h5{}
div.ct14>.section>.article>.texts>p{
    height: 80px;
}
div.ct14>.section>.article>.texts>nav{}

</style>