가상클래스 선택자 - xxx-child 주의사항

1.  .fruits의 첫번째 자식 요소가 p태그가 아니기 때문에 선택되지 않는다.

.fruits p:nth-child(1){
    color : red;
}

<div class = "fruits">
        <div>딸기</div>
        <p>망고</p>
        <p>오렌지</p>
        <span>사과</span>
    </div>

 

 

 

2. 후손 선택자가 모두 선택이 되기 때문에 1만 CSS처리 되지않는다.

.box-group div:first-child{
    color : red;
    font-weight : bold;
}

<div class = "box-group">
        <div>1</div>
        <div>2</div>
        <div>3
            <div>3-1</div>
            <div>3-2</div>
            <div>3-3</div>
        </div>
    </div>

모든 후손 스타일링 적용

 

 

3. 만약 div태그 1만 스타일링 적용하려면 수정해야 한다.

자식선택자로 수정해주면 된다.

.box-group>div:first-child{
    color : red;
    font-weight : bold;
}

 

 

 

4. 만약 자식요소들의 태그가 다른상황인데 동시에 CSS 적용하고 싶다면?

.box-group:first-child{
    color : red;
    font-weight : bold;
}

<div class = "box-group">
        <div>1</div>
        <div>2</div>
        <div>3
            <p>3-1</p>
            <div>3-2</div>
            <div>3-3</div>
        </div>
    </div>

클래스 다음으로 특정 태그를 지정하지 않으면, 특정 자식요소가 아니기 때문에 모든 자식요소들이 선택받게 된다.