CSS Selectors is used to apply the style to content present inside the html tags, class and ids. Sibling are like that you have the div in that html page.in that div lot of paragraph tag
present if you want to apply the color or any other style you want to apply to the paragraph tag. Using the Sibling. Using this sibling you will apply the style to the tag.
In this sibling have the two methods.
Like Normal Sibling Selector ~
And Adjacent Sibling Selector +
Sibling Selector ~
Using Sibling Selector ~ you have div in the html page and you will add the number paragraph tag inside the dive if you want to apply the style to all the paragraph tags inside the div you can use this Sibling selector ~.
CSS:
div ~ p{
color:#ff0000;
font-size:16px;
}HTML:<div > <p>Paragraph tag 1</p> <p>Paragraph tag 2</p> <p>Paragraph tag 3</p> <p>Paragraph tag 4</p> <p>Paragraph tag 5</p> <p>Paragraph tag 6</p> </div>
Adjacent Sibling Selector +
Using the Adjacent Sibling Selector you can apply the style only the next adjacent element only. If you have use the div and its contain the paragraph tag if you want to apply the style to the first paragraph tag inside the drive you can use this Adjacent Sibling tag +.
CSS:
div + p{
Color:#ff0000;
font-size:16px;
}HTML:<div >
<p>Paragraph tag 1</p>
<p>Paragraph tag 2</p>
<p>Paragraph tag 3</p>
<p>Paragraph tag 4</p>
<p>Paragraph tag 5</p>
<p>Paragraph tag 6</p>
</div>
