Cascading Style Sheets (CSS) offers many options to style web pages. CSS uses **selectors** to define the classes to which a particular style is applied. These selectors can also be combined for varied uses. The common combinations are highlighted below.

# Descendent combinator 

**Descendent combinator** combines selectors with a *space*.
```css
A B {
/* CSS Code */
}
```
Here, all selectors `B` which are a #key# descendent: come inside the block #key# of `A` will have the defined style.
  
# Child combinator
**Child combinator** combines selectors with a *greater than* symbol `>`.
```CSS
A > B {
/* CSS Code */
}
```
Here, all selectors `B` enclosed directly within `A` will have the defined style. 

# Next sibling combinator
**Next sibling combinator** combines selectors with a plus sign `+`. 
```CSS
A + B {
/* CSS Code */
}
```
Here, the selector `B` that comes immediately after `A` will have the defined style.

# Following sibling combinator
**Following sibling combinator** combines selectors with a *plus* sign `~`.
```CSS
A ~ B {
/* CSS Code */
}
```
This is similar to the next sibling combinator, except that it is not necessary for the sibling `B` to come immediately after `A`.

# Code

The following example shows how we can use the selectors above on HTML elements.

<html>
 <head>
 </head>
 <body>
    
    <h1>This will be <em>pink</em></h1>

    
    <div>
      <p>Blue paragraph.</p>
    </div>

    
    <h1>Educative</h1>
    <h2>Subtitle in gray colour</h2>
    <p>Paragraph</p>
</body>
</html>


/*Descendent combinator */
h1 em {
     color: rgb(255, 0, 179); 
     }

/*Child combinator */
div > p {
     color: blue; 
     }    
      
/*Next sibling combinator */     
h1 + h2 {
     color: grey; 
     }     

codemirror

How to combine selectors in CSS

CSS allows combining selectors such as descendent (space), child ( > ), next sibling ( + ), and following sibling ( ~ ) for varied styling.