Adjacent Sibling CSS Selector with Example of General and Next Sibling Combinator

Ad Banner Image

General Sibling Selector

General Sibling Selector is used to apply the design specification to the element which is the sibling of a defined element.

This Selector is represented by the tilde (~) symbol.

Example 1 – General Sibling Selector

<!DOCTYPE html>
<html>
	<head>
		<style>
			p ~ span
			{
				color:white;
				background-color: lightcoral;
				padding: 10px;
			}
		</style>
	</head>
	
	<body>
		<p><span>HTML Tutorial</span></p>
		<span>CSS Tutorial</span><br /><br />
		<span>PHP Tutorial</span><br /><br />
		<span>Java Tutorial</span>
	</body>
</html>

In the above examples, we used two tags p tag and span tag.

In the above example, we used a span tag which is inside a p tag and also used another span tag which is sibling to that p tag.

The design specification is applied to the all span element which are available siblings of that p element (define element).

General Sibling Selector
Fig.1 – General Sibling Selector Or Tilde Oprator Selector

Adjacent Sibling CSS Selector

Adjacent Sibling Selector is used to applying the design specification to the elements which are the adjacent sibling of a defined element.

This Selector is represented by the plus (+) symbol. This Selector is represented by the plus (+) symbol. And this selector is also known as “Next Sibling Combinator”.

Example 2 – Next Sibling Combinator Example

<!DOCTYPE html>
<html>
	<head>
		<style>
			p + span
			{
				color:white;
				background-color: rosybrown;
				padding: 10px;
			}
		</style>
	</head>
	
	<body>
		<p><span>HTML Tutorial</span></p>
		<span>CSS Tutorial</span><br /><br />
		<span>PHP Tutorial</span><br /><br />
		<span>Java Tutorial</span>
	</body>
</html>

In the above examples, we used two tags p tag and span tag.

In the above example, we used a span tag which is inside a p tag and also used another span tag which is sibling to that p tag.

The design specification is only applied to the span element whose content is CSS Tutorial, because this span element is the nearest sibling of a p element (defined element).

Adjacent Sibling CSS Selector
Fig.2 – Adjacent Sibling CSS Selector

Example 3 – Another Example of Next And General Sibling Selector

<!DOCTYPE html>
<html>
	<head>
		<style>
			p
			{
				padding: 0;
				margin: 5px;
			}
			p ~ p
			{
				color: black;
				background-color: skyblue;
				
			}
			div + p
			{
				color:white;
				background-color: lightcoral;
				padding: 10px;
			}			
		</style>
	</head>
	
	<body>
		<p>HTML Tutorial</p>
		<p>CSS Tutorial</p>
		<p>PHP Tutorial</p>
		<div>
			<p>Java Tutorial</p>
		</div>
		<p>My SQL Tutorial</p>
		<p>Java-Script Tutorial</p>
		<p>Jquery Tutorial</p>
	</body>
</html>

In the above examples, we used two tags p tag and div tag.

In the above example, we used a two different selector one is tilde operator and plus operator.

Here we define two different design specification to the p element. we used a p element inside a div tag and also have p elements which are siblings to this div element.

The tilde design specification is applied to the p element whose contents are CSS Tutorial, PHP Tutorial, Java-Script Tutorial and Jquery Tutorial because these p elements are the sibling of a p element (defined element).

The plus design specification is applied to the p element whose content is My SQL Tutorial because this p element is the nearest sibling element of a div tag (defined element).

No one design specification is applied to the p element whose content is Java Tutorial because this p element is inside a div element so this element is not a sibling of the p element.

Next Sibling Combinator
Fig.3 – General and Next Sibling Selector
Sponsor Banner
You can leave a response, or trackback from your own site.
Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress