반응형
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
span {
background-color: yellowgreen;
padding: 5px;
border-radius: 10px;
}
p span {
color: white;
}
</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>
결과
여기서 첫 번째 span 에만 밑줄을 긋고 싶다면 어떻게 해야 할까?
--> div의 바로 밑 자식(direct children)에서 span을 찾아 밑줄 효과를 주는 방법이 있다!
현재 div 밑에는 2개의 자식이 있다.
1. span (바로 밑의 자식)
2. p
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
span {
background-color: yellowgreen;
padding: 5px;
border-radius: 10px;
}
p span {
color: white;
}
div > span {
text-decoration: underline;
}
</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>
div > sapn {
}
형태로 써주면 div 바로 밑의 자식을 지목할 수 있다.
결과
바로 밑의 자식인 <span>hello</span> 에만 밑줄이 그어졌다.
반응형
'2. CSS' 카테고리의 다른 글
| CSS 바로 뒤에 오지 않는 형제 지목하기 A ~ B { } (0) | 2024.11.29 |
|---|---|
| CSS 형제 지목하기 A + B { } (0) | 2024.11.29 |
| CSS 특정 영역을 지정해서 변경하기 (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 |