반응형
<!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>
<address>hi</address>
<span>hello</span>
</div>
</body>
</html>
p 다음에 바로 오지 않는 형제 span 을 지목하고 싶다면
p ~ span {
} 을 사용
결과
반응형
'2. CSS' 카테고리의 다른 글
| CSS required placeholder 에 테두리 색 넣기 (0) | 2024.11.29 |
|---|---|
| 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 |