WEB/HTML & CSS

[HTML/CSS] 자식선택자와 자손선택자 차이점 이론 설명 / 부모요소와 자식요소

스용공주 2024. 10. 22. 03:29
728x90
728x90

이번 글은 자식선택자와 자손선택자의 차이점에 대한 설명글이다.

 

 

[ 자식선택자와 자손선택자 ]

아래 코드를 보면 box라는 클래스 밑에 div가 두개 있는 것을 확인할 수 있다.

아래 코드의 css부분과 같이 .box div 라고 작성하면 클래스 box 아래에 있는 div가 모두 선택되어(부모 div의 모든 자손이 선택됨) 코드가 실행되고 아래 실행결과 사진과 같이 결과가 출력된다.

[ html ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML 서식꾸미기</title>
    <link rel="stylesheet" href="style.css">
    <style>
    </style>
</head>
<body>
    <div class="box">
        <div>
            <div></div>
        </div>
    </div>
</body>
</html>

 

[ css ]

.box {
    border : solid red 2px;
    width : 600px;
    height : 200px;
}

.box div {
    border : solid green 2px;
    width : 450px;
    height : 150px;
    padding : 20px;
}

 

[ 실행결과 ]

 

[ 부모, 자식, 자손 관계 구조 ]

아래 사진과 같이 부모의 바로 아래에 있는 것은 자식요소, 자식 요소의 밑에 있는 것들은 자손으로 칭하게 된다.

위의 예제 구조 설명 / div의 부모, 자식, 자손 구조 설명

 

[ 자식만 따로 선택하기 ]

위의 예제를 보면 모든 자손들이 선택되는 것을 볼 수 있다.

부모의 바로 아래 자식만 따로 선택하는 방법은 아래 코드와 같이 >을 사용하면 된다.

html은 동일하고 css만 수정하였다.

 

[ css ]

.box {
    border : solid red 2px;
    width : 600px;
    height : 200px;
}

.box>div {
    border : solid green 2px;
    width : 450px;
    height : 150px;
    padding : 20px;
}

 

[ 실행결과 ]

 

만약 부모의 자식의 자식을 변형하고 싶다면 .box>div div라고 작성해주면 된다.

728x90
728x90