CSS 기본 (3)_자손, 자식 선택자

'스페이스'는 자손선택자
'>'는 자식선택자

 

 

예시를 통해 알아보자!

 

코드

<div class="box">
    <div>
        <div></div>
    </div>
</div>

.box {
    border: 1px solid red;
    width: 400px;
    height: 400px;
}
.box div {
    border: 1px solid blue;
    width: 200px;
    height: 200px;
    padding: 20px;
}

결과

가장 상위 영역은 box클래스이고 빨간 윤곽선이다.

.box div 에 의해서

그 아래 자식선택자, 자손선택자까지 파란 윤곽선의 영역으로

표시된 것을 알 수 있다.

 

즉, '스페이스바'로 css선택자를 설정하면

'자손선택자'들을 모두 select한다.

 

 

다른 예시를 보자.

 

코드

.box {
    border: 1px solid red;
    width: 400px;
    height: 400px;
}
.box > div {
    border: 1px solid blue;
    width: 200px;
    height: 200px;
    padding: 20px;
}

결과

이번에는 '>'를 이용해 자식 선택자를 지정하였다.

한 단계 아래의 선택자만 선택하였기 때문에

한 개의 파란 상자만 출력되었다.

 

 

마지막 예시를 보자!

 

코드

.box {
    border: 1px solid red;
    width: 400px;
    height: 400px;
}
.box  > div {
    border: 1px solid blue;
    width: 200px;
    height: 200px;
    padding: 20px;
}
.box > div div{
    background-color: #000;
    width: 50px;
    height: 50px;
    
}

결과

자식 선택자, 또 그의 자식 선택자까지 설정을 해서

위와 같은 결과가 나왔다.

 

 

---

정리

'>' : 자식 선택자, 바로 아래 영역의 선택자

'스페이스바' : 자손 선택자, 아래의 모든 영역이 select 대상.