Combinators in CSS

The relationship between two selectors is described by CSS combinators. The patterns used to choose items for styling purposes are called CSS selectors. A CSS selector can be simple or complicated, made up of multiple selectors linked together by combinators.

General Sibling Selector (), Adjacent Sibling Selector (+), Child Selector (>), and Descendant Selector(space) are the four types of combinators available in CSS. Each of these selectors establishes a particular connection between two other selectors, allowing for the identification of the relationship and positioning of contents inside the document.

Combinators in CSS provide the connection between selectors, making it easier to find and choose particular items within a document. Specifying distinct classes or IDs for each element to style them may result in the document becoming needlessly huge and difficult to manage on larger web pages with several elements nested within one another.

//Syntax
selector (combinator) selector {styles;}

//Example 
p ~ span { color : red; }

This method can be changed by using CSS combinators, which combine two selections to identify specific items for styling. To explicitly choose an element, we can use CSS combinators without giving it a class or id. Instead, we can use an universal combinator to achieve the same result by relating it to the items around it.

Types of CSS Combinators

General sibling selector (~)

In CSS, the general sibling selector is used to choose all elements that are directly following another element. In other words, it chooses those items in a document that are present after the specified element and are nested under the same parent element.

The tilde (~) sign is used between two selectors to indicate the general sibling selector. Any element indicated by the second selector is to be selected after the element represented by the first selector.

Example

//HTML

<body>
<div>I am a first div.</div>
<p>Codeshruta blogs</p>
<div>
<p>I am a paragraph</p>
</div>
<p>Change my color</p>
</body>

//CSS
div~p{
color : blue;
}

From the above code, we get the following output. As we can observe, only the child paragraphs that appear after the div are styled, and the paragraphs that appear within the <div> element as well as the paragraphs that are not the siblings of the <div> are not styled.

Adjacent sibling selector (+)

The adjacent sibling selector is used to choose the element that appears next to or adjacent to the defined selector tag. In other words, it chooses the items that follow the specified element and are nested under the same parent as that element.

A plus (+) sign between two selectors denotes the adjacent sibling selector. If an element represented by the first selector comes immediately after an element represented by the second selector, and if both elements are children of the same parent, the second selector represents the element that is to be selected.

Example

//HTML 

<body>
<div>
<h1>I am a first h1.</h1> 
<p>Codeshruta blogs</p> 
<p>I am a paragraph</p>
</div>
<p>Change my color</p>
</body>
//CSS 
h1+p{
color : red;
}

As we can see, no additional <p> is selected and just the first sibling <p> after <h1> is styled. Please be aware that the <p> will also be chosen if there was another pair of <h1> and <p> with the same parent at any other location in the document.

Child selector (>)

When using CSS, the child selector is used to pick out web items that are a specific element’s direct children. In other words, it excludes items that are nested inside a given element’s child or grandchild and only chooses elements that are directly nested inside that element.

The greater than (>) symbol is used between two selectors to indicate the child selector. The child selector is used to choose the items that are represented by the second selection and are the first selector’s children.

Example

//HTML

<body>
<div>
<p>Codeshruta 01</p>
<p>Codeshruta 02</p>
<section>
//not child but descendant
<p>Codeshruta 03</p>
</section>
<p>Codeshruta 04</p>
</div>
</body>

//CSS

div>p{
color : blue;
}

As we can see, the div’s only child paragraphs have styles. Along with the paragraph outside the div, which is also not styled, those paragraphs that are the grandchild and great-grandchild are not styled.

Descendent selector (space)

The descendent selector in CSS is used to select all items that are nested inside another element, whether they are the element’s child, grandchild, etc., within a webpage.

A blank space is used to symbolise the descendent between two selectors. Any element that is nested under the first selector at any level and is represented by the second selector is selected.

Example

//HTML
<body>
<div>
<p>Codeshruta 01</p>
<p>Codeshruta 02</p>
<section>//not child but descendant<p>Codeshruta 03</p></section>
<p>Codeshruta 04</p>
</div>
</body>

//CSS
div p{color : blue;}

As we can see, every paragraph under the div tag is chosen, even those that are nested inside a section tag.

Conclusion

In CSS, combinators are used to specify how two selectors relate to each other in order to pick particular items. Combinators make it easier to choose particular elements for styling. Combinators adhere to the fundamental syntax of a combinator selector sandwiched between two selectors. If you have any questions or problems, don’t forget to comment below.

Thanks for reading!

Written by : Vipin