CSS3 > Selectors

Adjacent Sibling in CSS3

How to select the adjacent siblings of a specified element in CSS3?


Adjacent Sibling selector selects all elements that are adjacent siblings of a specified element.

Adjacent means ‘Immediately following’. And the sibling elements must have the same parent element.

<style>
        div + p {
            background-color: lightblue;
        }
</style>
    
<body>
   <div>
       <p>DotNetFundacom is the best website for .NET Learning.</p>
       <p>ITFunda is the best website for providing the eBooks .</p>
   </div>
   <p>SNIT offering .NET Offline & Online Training in Hyderabad.</p>
   <p>SNIT providing training at reasonable cost.</p>
</body>

In the above code snippet, we given the style to the adjacent siblings of a div + p element.

OUTPUT

 Views: 993 | Post Order: 1



Write for us