Select Next Sibling with Next Sibling Selectors in HTML and CSS

Description

The following code shows how to select Next Sibling with Next Sibling Selectors.

Example


<html>
<head>
<title>Next Sibling Selectors</title>
<style type='text/css'>
body {<!--from   w ww .j a va2s.  c  o m-->
font: 12px sans-serif;
}
p {
padding: 5px;
}
h1 + p {
background: lightyellow;
color: darkkhaki;
border: 1px solid darkkhaki;
}
h1 + p + p {
background: yellowgreen;
color: green;
border: 1px solid green;
}
</style>
</head>
<body>
<h1>Next Sibling Selectors</h1>
<p>
The next sibling selector allows you to select an element based on
its sibling.
</p>
<p>
This paragraph has a yellowgreen background and green text.
</p>
<p>
This paragraph has no colored background, border, or text.
</p>
</body>
</html>

Click to view the demo

The code above generates the following result.

Select Next Sibling with Next Sibling Selectors in HTML and CSS

Select Next Sibling with Next Sibling Selectors in HTML and CSS

Description

Example

Select Next Sibling with Next Sibling Selec...