KokoaTalk Clone Coding: pseudo selector 2
<head>
<style>
body {
height: 1000vh;
margin: 50px;
}
span {
background-color: yellowgreen;
padding: 5px;
border-radius: 10px;
}
p ~ span { this span is next to the paragraph but it isn't immediately
text-decoration: underline;
}
p span {
color: white;
}
</style>
</head>
<body>
<div>
<p>
The world is full of suffering but it is also full of people
<span>overcoming</span> it.
</p>
<address>mapo-gu, Seoul</address>
<span>Helen Keller says</span>
</div>
</body>
Recap
p span: father - children
p > span: father - direct children
p + span: brother - direct brother
p ~ span: brother - brother, but don't need to be directly