CSS Combinators

In CSS, combinators are used to select elements based on their relationship to other elements in the document tree. There are four types of combinators:

Descendant selector: 

The descendant selector selects all elements that are descendants of a specified parent element. It is denoted by a space ( ) between two selectors. For example:

ul li {
 color: blue;
}

This will select all li elements that are descendants of ul elements and apply the color blue to them.

Child selector: 

The child selector selects all elements that are direct children of a specified parent element. It is denoted by a greater-than sign (>) between two selectors. For example:

ul > li {
 color: blue;
}

This will select all li elements that are direct children of ul elements and apply the color blue to them.

Adjacent sibling selector: 

The adjacent sibling selector selects the element that is immediately following another specified element. It is denoted by a plus sign (+) between two selectors. For example:

h1 + p {
 color: blue;
}

This will select the first p element that immediately follows an h1 element and apply the color blue to it.

General sibling selector: 

The general sibling selector selects all elements that are siblings of a specified element, and come after it in the document tree. It is denoted by a tilde (~) between two selectors. For example:

h1 ~ p {
 color: blue;
}

This will select all p elements that are siblings of an h1 element and come after it in the document tree, and apply the color blue to them.

Combinators can be combined to create more complex selectors. For example:

ul > li:first-child + li {
 color: blue;
}

This will select the second li element that is a direct child of a ul element, and apply the color blue to it, if it immediately follows the first li child element.