CSS Adjacent Sibling Selector

CSS adjacent sibling selector selects the adjacent sibling of the specified element. An element is called adjacent sibling of a given element if it is placed just next to it in the HTML document.

To select an element using the adjacent sibling selector use an addition symbol(+) between the element and its sibling.

In the example below, the adjacent sibling selector selects the <p> element that is placed just next to the <div> element in the document and applies CSS styles to it.

Example:

div + p{
   background: yellow;
   border: 2px solid blue;
   padding: 5px;
}

The adjacent sibling selector in the example below selects a <p> element that is placed just next to the <ul> element. Try it out:

Example:

ul + p{
   background: yellow;
   border: 2px solid blue;
   padding: 5px;
}

CSS Adjacent Sibling Selector Syntax

The adjacent sibling selector has the following syntax:

element + sibling{
   CSS styles
}

Related Pages

CSS Tutorial: CSS Selectors