ngecoding.com logo
Understanding Basic Concept of CSS Combinators

Understanding Basic Concept of CSS Combinators

//if(youLikeIt || itHelpsYou)clickShare();

 

CSS Combinator is used to explain relationship between two or more CSS Selectors. Combinator is needed in following conditions :

  • Styling <ul> tags that are children of <div class="nav"> tag.
  • Styling <div> tags that are siblings of <div class="header"> tag.
  • .....many more .... 

There are 4 CSS Combinators :

  1. Descendant Combinator. (<whitespace>) 
  2. Child Combinator. ( > )
  3. Adjacent Sibling Combinator. ( + )
  4. General Sibling Combinator. ( ~ )

Examples below using this HTML file :

HTML

<body>
	<div id="div-one">
		<ul class="ul-one">
				<li>Ul-One 1</li>
				<li>Ul-One 2</li>
				<li>Ul-One 3</li>
		 </ul>
		 <ul class="ul-two">
				<li>Ul-Two 1</li>
				<li>Ul-Two 2</li>
				<li>Ul-Two 3</li>
		 </ul>
	</div>
	<div id="div-two">
		<ul class="ul-one">
				<li>Ul-One 1</li>
				<li>Ul-One 2</li>
				<li>Ul-One 3</li>
		 </ul>
		 <ul class="ul-two">
				<li>Ul-Two 1</li>
				<li>Ul-Two 2</li>
				<li>Ul-Two 3</li>
		 </ul>
	</div>
</body>

HTML Document tree

Struktur pohon combinator CSS by ngecoding.com

 

1. Descendant Combinator (CSS1)

Descendant Combinator is used to styling elements that are contained by another element. 

Based on document tree, selects all descendant elements of an element. 

Descendant Combinator is made of 'whitespace' character.

ul li{ font-weight:bold; }

 

Example 1

div li { color:#ff0000; }

Document Tree Ilustration :

"red balloons are affected elements".
descendant combinator example 1 by ngecoding.com

Example 2

ul.two li { color:#ff0000; }

Descendant Combinator example by ngecoding.com

Example 3

#div-two ul.two li { color:#ff0000; }

Descendant Combinator example 3 by ngecoding.com

 

2. Child Combinator (CSS2)

Child Combinator is used to styling elements that are children of another element. 

Based on document tree, selects all direct child elements of an element. 

Child Combinator is made of '>' character.

 

Example 1

div > li { color:#ff0000; }

There are no <li> children of <div>.

child combinator example 1 by ngecoding.com

Example  2

#div-two > ul.two > li { color:#ff0000; }

Child Combinator example 3 by ngecoding.com

 

3. Adjacent Sibling Combinator (CSS2)

Adjacent Sibling Combinator is used to styling elements that are immediately following another element and share the same container. 

Based on document tree, selects one next (right) sibling element of another element . 

Adjacent Sibling Combinator is made of '+' character.

ul+li{ font-weight:bold; }

 

Example 1

li.first + li { color:#ff0000; }

Adjacent sibling combinator example 2 by ngecoding.com

 

Example 2

li + li + li { color:#ff0000; }

Adjacent sibling combinator example 3 by ngecoding.com

 

4. General Sibling Combinator (CSS3)

General Sibling Combinator is used to styling elements that are following another element and share the same container. 

Based on document tree, selects all next (right) sibling elements of another element . 

General Sibling Combinator is made of '~' character.

ul~li{ font-weight:bold; }

 

Example 1

li.first ~ li { color:#ff0000; }

General sibling combinator example 2 by ngecoding.com

 

Example 2

li ~ li ~ li { color:#ff0000; }

General sibling combinator example 3 by ngecoding.com

//if(youLikeIt || itHelpsYou)clickShare();
//Advertisements
Take a Break //non-technical articles
Hot Topics //most used tags
Email Subscriptions //We won't spam you. Honest!

Enter your email address:

Delivered by FeedBurner