General sibling selector
Description
The general sibling selector selects elements that follow another specified element, but not necessarily immediately.
- Selector: firstSelector ~ secondSelector
- Matches: Selects elements that match the secondSelector and follow an element that matches the firstSelector
- CSS Version: 3
Example
The following code shows how you can use the general sibling selector.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p ~ a {<!-- www .j a v a 2 s . c om-->
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a href="http://java2s.com">Visit the website</a>
<p>
This is a <span lang="en-uk" class="class2">test</span>.
</p>
<a href="http://w3c.org">Visit the W3C website</a>
<a href="http://google.com">Visit Google</a>
</body>
</html>