CSS adjacent sibling selector selects the adjacent sibling of the specified element. An element is called an 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 put 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
