Web Development

Combinator in CSS

Combinator in CSS is the section 20 of Beginner’s Guide to CSS.

Before going through this section, you have to update your knowledge in CSS selectors. We covered that topic in CSS Selectors section of this tutorial.

Okay! Let’s see what is a CSS combinator now. A combinator is something that explains the relationship between the selectors. A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different types of combinators in CSS.

  • Descendant selector
  • Child selector
  • Adjacent sibling selector
  • General sibling selector

We are going to look at each one of those.

Descendant Selector

Think about paragraphs inside division tags and paragraphs inside tables. You just want to add a style into paragraphs in the tables. Not all the paragraphs in the web page, but all the paragraphs inside tables. There may be multiple paragraphs inside the table and multiple tables inside the web page. Also paragraphs maybe inside on another element which are inside the table and those paragraphs need to be effected by the style. Let’s see each of the following solutions.

Adding a style to the paragraph tag. – Wrong – All the paragraphs in the web page will take effect.
Adding a inline style to each of the paragraph in the table  – Difficult – Table contain 1000 of paragraphs. Are you kidding?
Use a class to each of the paragraph in the table  – Difficult – Table contain 1000 of paragraphs. Are you kidding?

What if we can say CSS to select only the paragraph elements inside the table element. There you got the point. Here’s how it can be done.

[code language=”css”] td p {
background-color: yellow;
}
[/code]

The descendant selector matches all element that are descendants of a specified element. The above example selects all the

elements inside the elements. See how the selector is written. We use a space to combine those two elements, parent and child elements, with a space in the selector.

“This text is written inside the td.”

“This text written inside of a span tag, which is inside the td.”

“This Text is written outside the table.”

Child Selector

If a situation comes same as the above method, but this time you do not need to effect the style into paragraphs inside another element even it is inside the table. Like the paragraph inside the span tag example. We do not need something like that. That is where the child selector comes in handy. The child selector selects all elements that are the immediate children of a specified element. The following example selects all

elements that are immediate children of a element:

“This text is written inside the td.”

“This text written inside of a span tag, which is inside the td.”

“This Text is written outside the td.”

[code language=”css”] td > p {
background-color: yellow;
}
[/code]

See how the selector is written. We used > mark to combine those parent and child elements.

Adjacent Sibling Selector

Now we need to add a style to the first element that comes next to the table. The paragraph which is outside the table in the above example.  We called them as adjacent siblings. 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”.

“This text is written inside the td.”
“This text written inside of a span tag, which is inside the td.”

“This paragraph text is written outside the table and it is the first element comes after the table.”

“This paragraph text is written outside the table and it is the second element comes after the table.”

[code language=”css”] table + p {
background-color: yellow;
}
[/code]

In the above code sample we add a style to the paragraph elements which comes after a table. See how the selector is written. We used a + mark to combine the adjacent siblings.

General Sibling Selector

This one not only select the adjacent sibling, but all the siblings of a specific element.

“This text is written inside the td.”
“This text written inside of a span tag, which is inside the td.”

“This paragraph text is written outside the table and it is the first element comes after the table.”

“This paragraph text is written outside the table and it is the second element comes after the table.”

[code language=”css”] table ~ p {
background-color: yellow;
}
[/code]

In the above code sample we add a style to the paragraph siblings of the table.


In this section we explore more on CSS selectors. We combined siblings, parents and children using several selector combinators. In the next section we are going to see the usage in different ways of classes as selectors.

WHAT’S NEXT?

Explore More on CSS Classes.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW