element1~element2, not immediately sibling selector - HTML CSS CSS Selector

HTML CSS examples for CSS Selector:element not immediately sibling

  1. HOME
  2. HTML CSS
  3. CSS Selector
  4. element not immediately sibling

Description

The element1~element2 selector selects of element2 preceded by element1.

Both elements must have the same parent, but element2 does not have to be immediately preceded by element1.

Example

Select all <div> elements that are preceded by a <p> element with the same parent.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
p ~ ul {
    background: #ff0000;
}
</style><!-- ww  w  .j  ava  2s.c o m-->
</head>
<body>

<div>A div element.</div>
<div>div</div>

<p>The first paragraph.</p>
<div>div</div>

<h2>Another list</h2>
<div>div</div>

</body>
</html>

Related Tutorials