Tilde CSS Selector and Plus CSS Selector

Last Updated On Friday 21st Jan 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