Combinators in Cascading Style Sheets

Combinator

A combinator provides relationships among selectors that can be explained. A CSS selector can have more than one simple selector and the combination of those selectors with some relationships (like div + p, div ~ ul, and so on.) is known as a combinator.

Note

Selectors are the rule set that is used to select the HTML content on HTML pages so that they can be styled according to us. For the details follow the link given below.

Selectors in CSS

There are four types of combinators that are as follows:

Descendant Combinator

The descendant combinator allows you to combine two or more selectors so that you can be more specific in your selection method.

In other words, a descendant combinator matches all the elements that are descendants of the specified element.

Now let's have a look at the example given below.

<html>
<head>
<title>Descendant combinator</title>
<style>
div p{color:green;
font-family:arial black;
text-align: center;}
div ul{list-style-type: circle;
border: solid 1px #ccc;
color: red;}
</style>
</head>
<body>
<div>
<p>This paragraph is descendant of specified element i.e. div</p>
<p>This paragraph is also descendant of specified element i.e. div</p>
</div>
<h5>Hello desendants..!!</h5>
<h1>This is Descendant combinator</h1>
<div>
<ul>
<li>Animals</li>
<li>Fruits</li>
<li>Electronics</li>
</ul>
</div>
<ol>
<li>Boy</li>
<li>Girl</li>
</ol>
</body>
</html>

In the preceding example, there is only the selection of <p> and <ul> elements that are inside the <div> elements and the rest of all of them are not in any style.

Output

In the preceding output, you can see that the contents in the grey region are only affected because they are in an <div> element.

Child combinator

This combinator is similar to a descendant combinator but with the slight difference that it selects all the elements that are the immediate children of the specified element.

There is a slight change in syntax also that, instead of the space character between a “div” and a “p”, we are using a greater than symbol or (right angle bracket) in the case of a child combinator.

Example

<html>
<head>
<title>Child combinator</title>
<style>
#content > .child{color:green;
font-family:arial black;
text-align: center;
background-color:lightgrey;}
#list > .ulist{list-style-type: circle;
border: solid 1px #ccc;
color: red;
background-color:lightgrey;}
</style>
</head>
<body>
<div id="content">
<div class="child">
<p>This paragraph is immediate child of specified element</p>
</div>
<div>
<div class="child">
<p>This paragraph is not the immediate child</p>
</div>
</div>
</div>
<h5>Hello Children..!!</h5>
<h1>This is Child combinator</h1>
<div id="list">
<div class="ulist">
<ul>
<li>Animals</li>
<li>Fruits</li>
<li>Electronics</li>
</ul>
</div>
<div>
<div class="ulist">
<ul>
<li>Boy</li>
<li>Girl</li>
</ul>
</div>
</div>
</div>
</body>
</html>

In the preceding example, the selector will match all elements that have a class of child and ulist and that are immediate children of the #content element. That means that, unlike the descendant combinator, there can't be another element wrapping .child or .ulist, it must be a direct child element. The style will be applied only to the first <div> element that has a class of child or ulist. As you can see, the second <div> element with a class of child or ulist is inside another <div> element. As a result, the styles will not apply to that element, even though it too has a class of the child or ulist.

The output will make you clear.

Adjacent sibling combinator

In this combinator, the plus symbol (+) is used for declaration instead of the ">" symbol. The selector that selects all the elements that are adjacent siblings of the specified element is known as an adjacent sibling combinatory. Sibling elements must have the same parent element and "adjacent" means "immediately following".

Example

<html>
<head>
<title>Adjacent sibling combinator</title>
<style>
div + p{color:green;
font-family:arial black;
text-align: center;
background-color:lightgrey;}
div + ul{list-style-type: circle;
border: solid 1px #ccc;
color: red;
background-color:lightgrey;}
</style>
</head>
<body>
<div>
<p>This paragraph is not immediate child of specified element</p>
<p>Not even this paragraph is the immediate child</p>
</div>
<p>Now i am the immediate child</p>
<p>what about me..???</p>
<h5>Hello adjacent siblings..!!</h5>
<h1>This is Adjacent sibling combinator</h1>
<div>
<ul>
<li>Animals</li>
<li>Fruits</li>
<li>Electronics</li>
</ul>
</div>
<ul>
<li>Boy</li>
<li>Girl</li>
</ul>
</body>
</html>

In the preceding example the style will be applied only to adjacent siblings, in other words, the paragraph “Now I am the immediate child” comes just after the <div> element. Because “div + p” means sibling that is immediately following after the <div> element. Not even the paragraph comes after the adjacent sibling will be affected.

Here's the output that will make it clear.

General sibling combinator

The general sibling combinator is declared by the symbol (~) which selects all the elements that are the siblings of a specified element.

Example

<html>
<head>
<title>General sibling combinator</title>
<style>
div ~ p{color:green;
font-family:arial black;
text-align: center;
background-color:lightgrey;
}
div ~ ul{list-style-type: circle;
border: solid 1px #ccc;
color: red;
background-color:lightgrey;}
</style>
</head>
<body>
<div>
<p>I am not the general sibling</p>
<p>Even not me..</p>
<p>Because we are not in "div"</p>
</div>
<p>This paragraph is general sibling of specified element</p>
<p>This paragraph is also</p>
<p>Me too..!!</p>
<h5>Hello general siblings..!!</h5>
<h1>This is General sibling combinator</h1>
<div>
<ul>
<li>Animals</li>
<li>Fruits</li>
<li>Electronics</li>
</ul>
</div>
<ul>
<li>Boy</li>
<li>Girl</li>
</ul>
</body>
</html>

In the preceding example, those lists are, or that paragraph is, not affected that are in the <div> element because “div ~ p” or “div ~ ul” means all the elements just after the <div> element will be styled.

Output

Note: There could be other elements between a <div> and a <p> and the style would still apply. What you need to do is that you just make a group of selectors that are added between <div> and <p> separating each selector with a comma. Just look at the example given below.

Example

<html>
<head>
<title>General sibling combinator</title>
<style>
div ~ p,h1,h5{color:green;
font-family:arial black;
text-align: center;
background-color:lightgrey;}
</style>
</head>
<body>
<div>
<p>I am not the general sibling</p>
<p>Even not me..</p>
<p>Because we are not in "div"</p>
</div>
<p>This paragraph is general sibling of specified element</p>
<h5>Hello general siblings..!!</h5>
<p>This paragraph is also</p>
<h1>This is General sibling combinator</h1>
<p>Me too..!!</p>
</body>
</html>

Output

Combinators in Cascading Style Sheets

Reactions

2 Comments

Combinator

Descendant Combinator

Child combinator

Adjacent sibling combinator

General sibling combinator