CSS Combinator selector

In this article, we will see about CSS Combinator selector with examples. The combinator means to combine and the selector means to select an HTML element, so the Combinator selector means combine selector.

What is a Combinator selector

Combinator selector is also known as combination or combining selectors. It is possible to combine a selector with other selectors to make a specific selection.

Syntax of Combinator Selector

selector1selector2
{
declaration list;
}

To combine selectors, in place of selectors without using any separator like space, plus(+), comma, etc., we write selectors one beside another from generic to the specific selector. And in the flower bracket, we write the declaration list.

Example Syntax with selector

You can combine a tag selector with a class selector.

tagselectorclassselector
{
declaration list;
}

Tag selector with an ID selector to make a more specific selection.

tagselectorIDselector
{
declaration list;
}

You can combine a class selector with an attribute selector.

classselectorattributeselector
{
declaration list;
}

That means you can put one selector beside another selector to create a combination selector without using any separator

Examples of combinator selector

Element with class combinator selector

CSS:

p.redborder
{
border:2px solid red;
background-color: cyan;
}

HTML:

<p>Paragraph Text 1</p>
<h1 class="red">Heading Text 1</h1>
<p class="red">Paragraph Text 2</p>
<h1>Heading Text 2</h1>

Expected Output:

In the above HTML code, we have 2 <p> and 2 <h1> elements. I want to style only any p element with the classname “red”. If we use an element selector for that, the style will be applied to all p elements, so we should not use an elements selector. Other elements may have a class name of “red”, so we shouldn’t use the class selector. So we have to use combinator selector which is the correct method. If we select (p.red) the style will be applied only to any p element whose classname is “red”.

Element with ID combinator selector

CSS:

h1#black
{
border:2px solid black;
background-color: orange;
}

HTML:

<p>Paragraph Text 1</p>
<h1 id="black">Heading Text 1</h1>
<p id="black">Paragraph Text 2</p>
<h1>Heading Text 2</h1>

Expected Output:

In the above HTML code, we have 2 <p> and 2 <h1> elements and one set have id name “black”. I want to style only any h1 element with the id name “black”. If we use an element selector for that, the style will be applied to all h1 elements, so we should not use an element selector. Other elements may have an id name of “black”, so we shouldn’t use the Id|D selector. So we have to use combinator selector which is the correct method. If we select (h1#black) the style will be applied only to any h1 element whose ID name is “black”.

Class with attribute combinator selector

CSS:

h1.red[align="right"]
{
border:2px solid black;
background-color: blue;
}

HTML:

<p>Paragraph Text 1</p>
<h1 align="right">Heading Text 1</h1>
<p class="blue">Paragraph Text 2</p>
<h1 class="blue" align="right">Heading Text 2</h1>

Output:

In the above HTML code, we have 2 <p> and 2 <h1> elements and three element have class name “blue” . I want to style only any h1 element with the id name “blue” with align attribute value set to be “right”. For that, we have to use a combinator selector which is the correct method. If we select (h1.red[align=”right”]) the style will be applied only to h1 element with id name “blue” with align value is set to be “right”.

Conclusion

So, we can use a combinator selector with two, three, or more HTML elements. But when we select we must use the correct symbol for example (.) dot operator to select a class and the (#) hash symbol to select ID.