CSS Combinators


A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS3:

  • descendant selector
  • child selector
  • adjacent sibling selector
  • general sibling selector

Descendant Selector

The descendant selector matches all element that are descendants of a specified element.

Example

<style type="text/css">
        div span {
          font-size:20px;
          background-color:#888;
          color:#fff;
        }
 </style>

Selects all <span> elements inside <div> elements.


Child Selector

The child selector selects all elements that are the immediate children of a specified element.

Example

<style type="text/css">
        div > span {
          font-size:20px;
          background-color:#888;
          color:#fff;
        }
 </style>

Selects all <span> elements that are immediate children of a <div> elements.


Adjacent Sibling Selector

The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.

Sibling elements must have the same parent element, and "adjacent" means "immediately following".

Example

<style type="text/css">
        div + span {
          font-size:20px;
          background-color:#888;
          color:#fff;
        }
 </style>

Selects all <span> elements that are siblings of <div> elements.


Share this article on