Language/HTML_CSS
부모 자식 선택자
구일일구
2023. 8. 24. 09:59
반응형
공백
부모 태그 하위에 있는 태그에 스타일 적용 가능
부모선택자 자식선택자{ 속성1:속성값; 속성2:속성값; }
특수문자 " > "
공백을 넣은 것과 비슷하지만, 두 태그 사이에 다른 태그가 없는 순수 부모-자식 태그 간의 관계만 적용됨
<html>
<head>
<style>
.aa > .cc{ background-color: red }
</style>
</head>
<body>
<div class="aa">
<div class="cc">
sec1
</div>
</div>
<div class="aa">
<div class="bb">
<div class="cc">
sec2
</div>
</div>
</div>
<body>
</body>
</html>
sec1에만 적용됨
sec2에는 적용되지 않음 ⇒ aa와 cc사이에 bb가 있기 때문
반응형