반응형
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
span {
color: tomato;
}
</style>
</head>
<body>
<div>
<span>hello</span>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod commodi e
sequi ipsam odio dolorem. <span>inside</span>
</p>
</div>
</body>
</html>
결과
여기서 <p> 안에 있는 span을 바꾸려면 어떻게 해야 할까?
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
span {
color: tomato;
}
p span {
color: teal;
}
</style>
</head>
<body>
<div>
<span>hello</span>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod commodi e
sequi ipsam odio dolorem. <span>inside</span>
</p>
</div>
</body>
</html>
p span {
color: teal;
}
=> 부모인 p를 쓴 다음에 자식인 span 을 쓰면 : p 안에 있는 span 을 가리키게됨.
결과
반응형
'2. CSS' 카테고리의 다른 글
| CSS 형제 지목하기 A + B { } (0) | 2024.11.29 |
|---|---|
| CSS 부모 > 자식 (direct children) (0) | 2024.11.29 |
| CSS nth-child() 사용하기 (even, odd, 3n+1) (0) | 2024.11.28 |
| CSS pseudo selectors / first-child & last-child (0) | 2024.11.27 |
| CSS position absolute 사용해서 div 박스 옮기기 이동 (0) | 2024.11.26 |