<style>
.parent {
border: 1px solid red;
width: 600px;
height: 200px;
}
.child {
border: 1px solid blue;
width: 200px;
height: 50px;
}
</style>
<body>
<div class="parent">
<div class="child">
<div></div>
</div>
</div>
</body>
.parent {
border: 1px solid red;
width: 600px;
height: 200px;
}
.child {
border: 1px solid blue;
width: 200px;
height: 50px;
}
.parent div {
border: 1px solid yellowgreen;
padding: 20px;
width: 200px;
}
한 칸을 띄우고 선택자를 적으면 모든 자식에 대해 적용을 시킨다.
.parent > div {
background: #352351;
}
>를 적어주면 바로 아래의 자식에 대해 적용을 시킨다.
.parent > div div {
background-color: aqua;
}
parent 클래스를 가진 요소의 바로 아래 div의 모든 div태그에 aqua 배경색을 주게 된다.
'Front-end > Web Publishing' 카테고리의 다른 글
| css 그림자 효과 주기 (box-shadow) (0) | 2024.06.13 |
|---|---|
| border-radius로 여러 모양 만들기 (0) | 2023.11.02 |
| css 선택자 우선순위 (0) | 2023.10.31 |