Ads by ProfitSence
Close

Tilde CSS Selector and Plus CSS Selector

Last Updated on Wednesday 5th Oct 2022

What is CSS Combinator ?

Way to define the relation between Selectors

  • General Sibling Selector ~
  • Adjacent Sibling Selector +
			
					<div class="container1">
  <p>Hi From Earth</p>
  <h1>Tilde Selector</h1>
  <p>Hi From Venus</p>
  <p>Hi From Mars</p>
</div>
<div class="container2">
  <p>Hi From Earth</p>
  <h2>Plus Selector</h2>
  <p>Hi From Venus</p>
  <p>Hi From Mars</p>
</div>

			
	

~ Tilde Selector - General Sibling Selector

  • A general sibling selector is made up of two simple selectors separated by the tilde (∼) character.
  • Selects every element that comes next to that Selected Element
			
					.container1 h1 ~ p {
  color: #fff;
  padding: 1rem;
  border-radius: 1rem;
  background: #bd52de;
}

			
	
  • This case all the p element after the h1 tag with class of container1

+ Plus Selector - Adjacent Sibling Selector

  • Selects first element that comes next to that Selected Element
			
					 .container2 h2 + p {
  color: #fff;
  padding: 1rem;
  border-radius: 1rem;
  background: #bd52de;
}

			
	
  • This case the only p element after the h2 tag class of container2

Here's the CodePen Link for Your Reference