What is CSS Combinators

CSS (Cascading Style Sheets) combinators are used to define relationships between different HTML elements and apply styles to them based on those relationships. Combinators allow you to target specific elements or groups of elements within a document structure. There are several types of CSS combinators
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four combinators in CSS

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

What is descendant selector (space)
The Descendant Selector (denoted by a space character) in CSS is a type of combinator used to select all elements that are descendants of a specific element. It allows you to target and style elements that are nested within other elements in the HTML structure. Here’s an explanation of how the Descendant Selector works.

HTML

<ul>
  <li>
    <div>Item 1</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
  <li>
    <div>Item 2</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
</ul>

CSS 

li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}

What is child selector (>) in css
The Child Selector (>) in CSS is a combinator used to select and style elements that are direct children of a specific parent element. It targets elements that have a parent-child relationship in the HTML structure, selecting only those elements that are one level deep, or in other words, immediate children of the parent element. Here’s an explanation of how the Child Selector works

How it works:
The selector begins with parent, which is the element whose direct children you want to select.
It includes the > character.
Following the >, you specify child, which is the direct child element you want to style.
The selector will select and apply styles only to the immediate children of the parent element that match the child element.

HTML
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

CSS
ul > li {
  font-weight: bold;
}

<h2>Title</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>


h2 + p {
  font-weight: bold;
}

What is Adjacent Sibling Selector
The Adjacent Sibling Selector in CSS is denoted by the plus sign (+) and is used to select an element that is immediately preceded by a specific element. It targets an element that shares the same parent as the preceding element and appears directly after it in the HTML structure.
CSS selector h2 + p selects the

CSS selector h2 + p selects the <p> element that directly follows the <h2> element. It applies the font-weight: bold; style only to the first <p> element because it is the immediate sibling of the <h2> element.
So, after applying the CSS, the first paragraph (<p>Paragraph 1</p>) will have bold text, while the second paragraph (<p>Paragraph 2</p>) remains unaffected.

What is General combinators
The general sibling combinator (~) separates two selectors and matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element.
The General Sibling Selector (~) in CSS is a combinator used to select and style elements that share the same parent and are at the same level or depth in the HTML hierarchy. It targets elements that are siblings of a specific element and are located anywhere after that element within the same parent. Here’s an explanation of how the General Sibling Selector works

Example here how to used it

HTML
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

CSS
ul ~ p {
  color: blue;
}