Over a million developers have joined DZone.

CSS Adjacent Sibling Selectors

DZone's Guide to

CSS Adjacent Sibling Selectors

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Among the types of CSS selectors, one that is often overlooked is the CSS Adjacent Selector.

Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2.

The CSS code

h3 + p {
font-weight: bold;
color: #00FF00;
The text below is a simple example of the above code:

Example heading 3 text

This is the <p> after the heading. It should be bold and blue.

What's even better is that this seems to work perfectly in IE 7, Firefox, Opera, and Safari.

Now I know what you're thinking. Where in the world am I going to use this? Perhaps we could use something like this to do something to all rows in a table except the first row? What if we knew the next element after an &lt;img&gt; tag was going to be a custom caption that we wanted to place properly underneath our image? Now that you know how to use it I have every confidence you can come up with a brilliant use for it.

What ideas do you have to use this CSS gem? What other selectors have you found useful but don't often see?

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}