CSS Combinators

CSS combinators are used to define the relationships between different HTML elements and apply styles to them accordingly. They allow you to select elements based on their positions in the HTML structure. There are several types of combinators in CSS:

Descendant Combinator (Whitespace)

Selects all elements that are descendants of a specified element, no matter how deeply nested.

Example

div p {
  /* Selects all <p> elements inside a <div> */
}

You can click on above box to edit the code and run again.

Output

Child Combinator (>)

Selects all direct children of a specified element.

Example

ul > li {
    /* Selects all <li> elements that are direct children of a <ul> */
 }

You can click on above box to edit the code and run again.

Output

Adjacent Sibling Combinator (+)

Selects an element that is immediately preceded by a specified element.

Example

h2 + p {
    /* Selects the <p> element that is immediately preceded by an <h> */
}

You can click on above box to edit the code and run again.

Output

General Sibling Combinator (~)

Selects all sibling elements that share the same parent as the specified element.

Example

h2 ~ p {
    /* Selects all <p> elements that are siblings of an <h2> */
}

You can click on above box to edit the code and run again.

Output

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

Example

div article p {
    /* Selects all <p> elements that are inside an <article> element, 
       which is inside a <div> element */
}

You can click on above box to edit the code and run again.

Output