CSS Combinators

From CSS3, some selectors are known as combinators. CSS3 introduces one new combinator and has taken the remaining combinators from the CSS2 where it were known as selectors.

 

What is a combinator

Combinators allow you to select one or more elements in an HTML document based on the relationship with other elements with that element(s) and then allow you to add style declaration.

To understand combinators properly, you need to know the relationships among different HTML elements in a document.

 

Relationship among HTML elements

It is easier to understand relationship among elements if you resemble an HTML page with a tree. At first, take a look at the following simple HTML page-

<HTML>
    <head>
    <title>This is page title</title>
    </head>
    <body>
        <p>this is a paragraph.
            <span>some text</span>
            <strong>some text</strong>
        </p>
    </body>
</html>

 

 

If we resemble the above code with a tree, it would look like the following-

Tree representation of HTML element

Here are the relationships among the elements-

Ancestor: An element that encloses one or more other elements is called the ancestor of those enclosed elements. For example, in the following image, p includes both span and strong elements. So, p is their ancestor. Similarly, body is the ancestor of p, span, and strong elements. And html is ancestor of all the remaining elements.

Descendant: When an element is enclosed by one or more other elements then the element is descendant of the enclosing elements. For example, in the following example, both span and strong elements are enclosed by p element; so, those are descendants of p. Similarly, in the above picture p is the descendant of body etc. So, an element is descendant of any other elements in its parent line (see above image).

Tree representation of HTML element(Ancestor & Descendent)

Child: An element which is directly enclosed by another element is the child of that element. In the above image, both span and strong are directly enclosed by p, so those are children of p. Similarly, p is the child of body; body is the child of html etc.

Parent: The element that directly encloses one or more elements is their parent. For example, p is the parent of both span and strong.

Sibling: Elements those share same parent are siblings of one another. For example, p is the parent of both span and strong, so those are sibling of each other. Similarly, head and body are siblings.

 

Now, get back to the combinators.

List of combinators

There are four combinators-

  • Descendant combinators
  • Child combinators
  • Adjacent sibling combinators
  • General sibling combinators

 

Descendent combinators

A descendant combinator is one or more elements that are descendant of another element.

Descendant combinator syntax

element element… {declaration}

Here, the left most element is the senior most ancestor, the next element is its descendant, and so on. The right most element is the targeted element that you’ll add style to.

When you’ll use descendant combinator

When you want to style one or more elements that are descendant of a specific element, then use descendant combinator. See the following example-

HTML:

<body>
<a href=”#”>First link</a>
<ul>
    <li><a href=”#”>Second link</a></li>
    <li><a href=”#”>Third link</a></li>
    <li><a href=”#”>Fourth link</a></li>
    <li><a href=”#”>Fifth link</a></li>
</ul>
</body>

In the above code, there is one link outside the unordered list and four links inside it. If you only want to make the font color of the four links orange inside the unordered list, then, use descendant combinators to select those links like following-

CSS:

ul li a{ color: brown; }

Output:

First link

  • Second link
  • Third link
  • Fourth link
  • Fifth link

The beauty of the descendant combinator is that you don’t need to edit the HTML for the targeted element(s)(ex. to add class or id) to select that element(s).

 

Child combinators

A child combinator selects one or more elements that are direct children of another element. Please note that child combinator won’t select any element if there is no parent-child relationship between the selectors.

Child combinator syntax

element > element… {declaration}

To create child combinator, add greater than (>) sign between the parent and the child selectors.

When you’ll use child combinator

If you want to style one or more elements that are direct child of a specific element, use child combinator. See the following example-

<body>
<a href=”#”>First link</a>
<ul>
    <li><a href=”#”>Second link</a></li>
    <li><a href=”#”>Third link</a></li>
    <li><a href=”#”>Fourth link</a></li>
    <li><a href=”#”>Fifth link</a></li>
</ul>
 </body>

Suppose you only want to change the font color of the “First link” to orange, not the remaining links, then, use child combinator to select that link like following-

CSS:

body > a { color: orange; }

Output:

First link

  • Second link
  • Third link
  • Fourth link
  • Fifth link

Internet explorer 6 doesn’t support child combinator.

 

Adjacent sibling combinators

An adjacent sibling combinator selects an element which is next to another element that you specify. Both elements are siblings to each other; so, they share same parent.

Adjacent sibling combinator syntax

element + element { declaration }

To create an adjacent sibling combinator, add plus sign ( + ) between the two siblings.

When you’ll use adjacent sibling combinator

When you want to add style of an element which is next to another element, use this combinator. For example, in the following code there are three paragraphs (p) after the title (h1). To select just the first paragraph, you can use adjacent sibling combinator. See the following example-

HTML:

<body>
    <h1>This is title</h1>
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>Third paragraph</p>
</body>

CSS:

h1+p { color: orange; }

Output:

This is title

First paragraph

Second paragraph

Third paragraph

Internet explorer 6 doesn’t support adjacent sibling combinator.

General sibling combinators

A general sibling combinator is much like an adjacent sibling combinator except the fact that the targeted sibling(s) doesn’t necessarily have to immediately next to another sibling that you specify. A general sibling combinator selects one or more siblings of an element that you specify. Both elements are siblings to each other; so, they share same parent.

 

General sibling combinator syntax

element ~ element { declaration }

To create a general sibling combinator, add tilde sign ( ~ ) between the two siblings.

 

When you’ll use general sibling combinator

If you want to add style to all the siblings of a specific type of element, you can use this combinator. For example, to make the text color orange to all the p elements which are siblings to h1 element, you can use general sibling combinator. Please note that the paragraph inside the unordered list is not effected. See the following example-

HTML:

<body>
<h1>This is title</h1>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
<ul>
<li><p>Fourth paragraph</p></li>
</ul>
</body>

CSS:

h1+p {color: orange;}

Output:

This is title

First paragraph

Second paragraph

Third paragraph

  • Fourth paragraph

Internet explorer 6 doesn’t support general sibling combinator.