html을 다루다 보면 부모 태그 안에서 자식 태그를 찾아 스타일을 적용해야하는 일이 있을 수 있다.
다음의 코드를 보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
span {
background-color: yellowgreen;
padding: 5px;
border-radius: 10px;
}
div span {
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<span>hello</span>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod commodi et
sequi ipsam odio dolorem. <span>inside</span>
</p>
</div>
</body>
</html>
그리고 결과를 확인해보면
div안에 있는 모든 span에 스타일이 적용되었음을 확인할 수 있다.
우리가 코드에서 주목해야할 부분은 'div span'인데 이는 div밑에 있는 모든 span에 스타일을 적용시켜주겠다는 의미가 된다.
div 바로 밑에 있는 span에만 스타일을 적용하는 방법도 있다. 위 코드에서 'div span'부분을 다음과 같이 수정해보자.
div > span {
text-decoration: underline;
}그리고 결과를 확인해보면 다음과 같다.
따라서 'div > span'이라 쓰면 div 바로 밑에 있는 span에만 스타일을 적용시켜주겠다는 의미가 된다.
형제(동등한 위치에 있는)에게 효과를 주는 방법이 있다. 다음의 코드를 보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
span {
background-color: yellowgreen;
padding: 5px;
border-radius: 10px;
}
p + span {
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod commodi et
sequi ipsam odio dolorem.
</p>
<span>hello</span>
</div>
</body>
</html>
그리고 결과를 확인해보면
p와 형제인 span에만 효과가 적용되었음을 확인할 수 있다.
즉 'p + span' 이라 쓰면 p와 동등한 위치에 있는 형제인 span을 찾아 스타일을 적용시켜주겠다는 의미가 된다.
대신 이 방법은 p와 가장 인접한 span 형제에게만 적용이 된다.
그렇다면 인접하든 인접하지 않든 동등한 위치에 있는 형제에게 효과를 주는 방법은 없을까? 다음의 코드를 보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
span {
background-color: yellowgreen;
padding: 5px;
border-radius: 10px;
}
p ~ span {
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<p></p>
<address>hi</address>
<span>hello</span>
<span>bye</span>
</div>
</body>
</html>p ~ span으로 바뀌었다. 그리고 결과를 확인해보면
다음과 같이 p와 인접해있든 인접해있지 않든 p의 형제인 span에 스타일이 적용되었음을 확인할 수 있다.
즉 'p ~ span'이라 쓰면 p와 동등한 위치에 있는 모든 span에 스타일을 적용시키겠다는 의미가 된다.
Combinator에 대한 자세한 설명은 다음의 사이트에서 확인할 수 있으니 참고하도록 하자.
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators
'WEB > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] #16.States (0) | 2022.01.11 |
|---|---|
| [HTML/CSS] #15.attribute selector (0) | 2022.01.10 |
| [HTML/CSS] #13.Pseudo Selector (0) | 2021.12.27 |
| [HTML/CSS] #12. position: fixed, relative, absolute (0) | 2021.12.10 |
| [HTML/CSS] #11.Media Query (반응형 웹디자인) (0) | 2021.12.10 |
