#3.15 Combinators이전 포스트/코코아 html css2020. 12. 10. 20:44
Table of Contents
body span은 body밑에 있는 모든 span에 스타일이 적용된다.
아래의 예에 body안에 있는 모든 span에 적용됨.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>title</title>
<style>
body {
background-color: tomato;
height: 100vh;
}
span {
background-color: wheat;
}
body span {
background-color: teal;
}
</style>
</head>
<body>
<span>hello</span>
<p>what's mean to lose a <span>thing</span> you really want to stay</p>
</body>
</html>
body > span은 body의 자식요소에 있는 span에만 적용된다.
따라서 hello만 teal로 변경된다.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>title</title>
<style>
body {
background-color: tomato;
height: 100vh;
}
span {
background-color: wheat;
}
body > span {
background-color: teal;
}
</style>
</head>
<body>
<span>hello</span>
<p>what's mean to lose a <span>thing</span> you really want to stay</p>
</body>
</html>
p + span은 p의 형제요소인 span에 스타일이 적용된다.
따라서 <p>이후에 있는 span에 스타일이 적용된다.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>title</title>
<style>
body {
background-color: tomato;
height: 100vh;
}
span {
background-color: wheat;
}
p + span {
background-color: teal;
}
</style>
</head>
<body>
<span>hello</span>
<p>what's mean to lose a <span>thing</span> you really want to stay</p>
<span>last</span>
</body>
</html>
'이전 포스트 > 코코아 html css' 카테고리의 다른 글
| #3.17 States (0) | 2020.12.11 |
|---|---|
| #3.16 Pseudo Selectors part Two (0) | 2020.12.11 |
| #3.14 Pseudo Selectors part One (0) | 2020.12.10 |
| #3.13 Relative Absolute (0) | 2020.12.10 |
| #3.12 Fixed (0) | 2020.12.07 |
@병고라니 :: 컴퓨터공학과 고인물
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!