CSS - Adjacent Sibling Selectors

Adjacent Sibling Selectors in CSS

CSS adjacent sibling selector ornext sibling selectorselects an element that is immediately after another element. It is used to select only those elements which immediately follow the first selector. Both elements should share the same parent.

Syntax

The syntax for CSS adjacent sibling selectors is as follows:

selector1 + selector2 {

    /* property: value; */

    color: #04af2f

}

Example of Adjacent Sibling Selectors

In this example, the style is applied only to thepelement which is just after thedivelement. The other p elements remain unaffected.

Example 2

In this example, we have used an adjacent sibling selector to design the p element just after the h3 tag having the same parent element i.e. div container.