[CSS] Combinators

Descendant Combinator

The descendant combinator uses space.

It selects nodes that are descendants of the first selected element.

 

This is a usage example.

div span {
  color: teal;
}

Child Combinator

The child combinator uses >.

It selects a node that is direct children of the first element.

 

This is a usage example.

ul > li {
  font-weight: 700;
}

Adjacent Sibling Combinator

The adjacent sibling combinator uses +.

It selects adjacent siblings, and it means both elements have the same parent.

 

This is a usage example.

input + button {
  width: 100px;
}

General Sibling Combinator

The general sibling combinator uses ~.

It selects siblings, and it means they have the same parent.

 

This is a usage example.

span ~ img {
  color: tomato;
}

Column Combinator

The column combinator uses ||.

It selects nodes that belong to a column.

 

This is a usage example.

col || td {
  background-color: gold;
}

 

I've never used this combinator.