반응형
<!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;
}
p + span {
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod commodi e
sequi ipsam odio dolorem. <span>inside</span>
</p>
<span>hello</span>
</div>
</body>
</html>
p + span {
text-decoration: underline;
}
으로 설정하면 p 다음에 오는 span에 언더라인이 쳐진다.
결과
반응형
'2. CSS' 카테고리의 다른 글
| CSS Pseudo-classes 종류 (0) | 2024.11.29 |
|---|---|
| CSS 바로 뒤에 오지 않는 형제 지목하기 A ~ B { } (0) | 2024.11.29 |
| CSS 부모 > 자식 (direct children) (0) | 2024.11.29 |
| CSS 특정 영역을 지정해서 변경하기 (0) | 2024.11.29 |
| CSS nth-child() 사용하기 (even, odd, 3n+1) (0) | 2024.11.28 |