Sibling selectors

Sibling selectors are targeting only adjacent siblings in the forward order, meaning that the previous sibling in the same branch or the one found two or more positions down the line cannot be reached.

The siblings in the selector must share the same parent in order to make this approach work.

Example

CSS sibling selectors example:

<html>
<head>
<title>CSS tutorial</title>
<style type="text/css">
h3 {
	color:#222;
}
h3 + h3 {
	color:#444;
}
h3 + h3 + h3 {
	color:#777;
}
</style>
</head>
<body>

<h3>This is sibling #1 in the parent element &lt;body&gt;</h3>
<h3>This is sibling #2</h3>
<h3>This is sibling #3</h3>
<h3>This is sibling #4</h3>
<p>This is the style sheet applied to this document:<br />
&lt;style type="text/css"&gt;<br />
h3 {<br />
	color:#222; <br />
}<br />
h3 + h3 {<br />
	color:#444;<br />
}
h3 + h3 + h3 {<br />
	color:#777; <br />
}<br />
&lt;/style&gt;
</p>

</body>
</html>

›› go to examples ››

Example

CSS sibling selectors example:

Comments

About

Contact

Get Connected