The general sibling combinator (~) separates two selectors and matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element. Output:
<!-- General Sibling Selector(element tilde element) div~p:- Selects every <p> elements that are preceded by a <div> element. -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>General Sibling Selector</title>
<style>
div~p {
color: aqua;
background-color: black;
}
</style>
</head>
<body>
<div>
<footer>
<p>Inside div</p>
</footer>
Here is no effect. because it is not defined in style sheet. Only defined div is a parent element of p.
<p>Inside div</p>
<p>Inside div</p>
</div>
<div>
<span>Span Element</span>
</div>
<p>Outer Paragraph from div</p>
<p>ljflsadjf</p>
</body>
</html>Show Output :
