CSS Combinators & multi selectors

CSS Combinators

CSS Combinators are the means to select multiple selectors in a HTML document.

CSS Combinators show the relationship between different selectors of the HTML.

Before describing about Combinators, let us first clear the concepts about siblings, descendants & child.

In laymen terms, Siblings are the elements present in the same level.

Descendants & Child refer to the elements which are under a specified parent element.

Let us clear this concept with the help of family members.

Consider a family which consists of Grandparents, Parents & Their Children.

In the above family tree, there are three levels: First Level, Second level & Third level.

First Level consists of Grandparents.

Second Level consists of Parent A & Parent B.

Third Level consists of Child A, Child B & Child C.

With reference to above family tree,

Parent A, Parent B, Child A, Child B, Child C are the descendants of Grandparents.

Parent A & Parent B considers to be the child of Grandparents

Child A, Child B consider to be the child of Parent A

Child C is the child of Parent B.

Parent A & Parent B considers to be the siblings.

Now, you have clearly understood the concepts of child, descendants & siblings.

Lets start with the CSS Combinators.

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

There are different types of Combinators used in CSS stylesheet:

Descendant Selector:

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

The following code will select all the p which comes under the div tag.

div p{

Color : blue;

}

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

The following example selects all <p> elements that are immediate children of a <div> element:

div > p {
background-color: yellow;
}

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".

The following example selects all <p> elements that are placed immediately after <div> elements:

div + p {
background-color: yellow;
}

General Sibling Selector: The general sibling selector selects all elements that are siblings of a specified element.

The following example selects all <p> elements that are siblings of <div> elements:

div ~ p {
background-color: yellow;
}

I hope this article have helped you in understanding what combinators are.

You can also refer to my other articles also.

CSS for beginners