CSS Combinators

CSS Combinators clarifies the relationship between two selectors, whereas the selectors in CSS are used to select the content for styling.

There can be more than one simple selector in a CSS selector, and between these selectors, we can include a combinator. Combinators combine the selectors to provide them a useful relationship and the position of content in the document.

There are four types of combinators in CSS that are listed as follows:

• General sibling selector (~)
• Adjacent sibling selector (+)
• Child selector (>)
• Descendant selector (space)

General Sibling Selector (~)

It uses the tlide (~) sign as the separator between the elements. It selects the elements that follow the elements of first selector, and both of them are the children of the same parent. It can be used for selecting the group of elements that share the common parent element.

It is useful when we have to select the siblings of an element even if they are not adjacent directly.

Syntax

Suppose we have to select all <p> elements that are the siblings of <div> element, then we can write it as:

The figure given below helps us to understand the General sibling selector (~).

In this figure, the blocks with the green color are the selected blocks affected after using the general sibling selector.

Example

In this example we are selecting the <p> elements that come after the <h1>. There is a <div> element which will not get selected and the paragraph element inside the div will also not get selected. But those <p> elements that come after the <div> will be affected.

This example will illustrate the use of a General sibling selector (~).

Output

Adjacent Sibling Selector (+)

It uses the plus (+) sign as the separator between the elements. It matches the second element only when the element immediately follows the first element, and both of them are the children of the same parent. This sibling selector selects the adjacent element, or we can say that the element which is next to the specified tag.

It only selects the element which is just next to the specified first element.

Syntax

If we have to select the paragraph that comes immediately after another paragraph, then by using the adjacent selector, it will be written as follows:

The figure given below helps us to understand the Adjacent sibling selector (+).

In this figure, the blocks with the green color are the selected blocks affected after using the adjacent sibling selector. There is the selection of those paragraph elements that immediately comes after another paragraph element.

Example

In this example we are selecting the <p> element that comes immediately after the <p> element. There is an <div> element that will not be selected, and the paragraph element after the div will also not be selected. But the <p> element that comes just next to the third paragraph will be affected.

This example will illustrate the use of Adjacent sibling selector (+).

Output

Child Selector (>)

It uses the greater than (>) sign as the separator between the elements. It selects the direct descendant of the parent. This combinator only matches the elements that are the immediate child in the document tree. It is stricter as compared to the descendant selector because it selects the second selector only when the first selector is its parent.

The parent element must always be placed at the left of the ">". If we remove the greater than (>) symbol that designates this as a child combinator, then it will become the descendant selector.

Syntax

If we have to select the paragraph elements that are the children of <div> element then by using the child selector, it will be written as follows:

The figure given below helps us to understand the child selector (>).

In this figure, the blocks with the green color are the selected blocks affected after using the child selector. As we can see in the figure, there is only the selection of those paragraph elements that are the direct child of the div element.

Example

In this example we are selecting the <p> elements that are the child of a <div> element. It only selects those paragraph elements that are the direct child of the div element.

This example will illustrate the use of the child sibling selector (>).

Output

Descendant Selector (space)

It uses the space as the separator between the elements. The CSS descendant selector is used to match the descendant elements of a particular element and represent it using a single space. The word descendant indicates nested anywhere in the DOM tree. It can be a direct child or deeper than five levels, but it will still be referred to as a descendant.

It combines two selectors in which the first selector represents an ancestor (parent, parent's parent, etc.), and the second selector represents descendants. The elements matched by the second selector are selected if they have an ancestor element that matches the first selector.

Syntax

If we have to select the paragraph elements that are the children of an <div> element, then by using the descendant selector, it will be written as follows:

The figure given below helps us to understand the descendant selector.

Example

Output