CSS Combinators

What's a rule in CSS? A rule in CSS is a combination of selector ("WHAT to style") and declaration ("HOW to style it").

If two or more rules target the same element and set different styles for the same property, this conflict needs to be resolved. So here we have specificity, which is all about resolving conflicts that arise from multiple CSS rules which target the same element.

In CSS we have the kwyword inherit which simply means "please use the inherited style". So this can be used when we want to inherit some properties from the parent of our element.

Another thing we can use is the so called combinator. A combinator allows us to combine multiple selectors to be more precise about what we want to select. The rule with more information to it wins over rules with less information. So the more specific rule has a higher specificity.

/* Selector 1 */ #product-overview h1 { color: white; font-family: 'Anton', sans-serif; } /* Selector 2 */ h1 { font-family: sans-serif; }

In the example above the first selector is more specific. Combinators allow us to be more clear about our rules and select elements by passing more information to the selector. Now you can combine multiple selectors, not just two.

Types of combinators:

1. Adjacent sibling - is added by adding a plus between the selectors you want to combine and again these could be more than two, so for example it could be "div + p + a" to select anchor tags that are connected to the paragraph and div

Adjacent sibling example:

HTML:

<div> <h2>Now applied</h2> <p>CSS applied</p> <a>This is a link</a> <h2>Not applied</h2> <h3>Not applied</h3> <p>Not applied</p> <a>This is the second link</a> <h2>Not applied</h2> <p>CSS applied</p> </div>

CSS:

h2 + p { color: red; } h2 + p + a { color: blue; }

In this example we apply the red color property to all pharagraphs that are after h2 element, so to all pharagraphs that has the text "CSS applied" in our case. If you combine multiple selectors, for example "h2 + p + a", then the style is applied just for anchor tags that are next to paragraphs that are next to h2 tags. So in our case, when we use this combinator we apply the CSS just for the anchor tag with the text "This is a link". So here we need to keep in mind that elements should share the same parent and second element comes immediately after the first element.

2. General sibling - uses the tilde sign here between the selectors we want to combine. For the general sibling is important just to have the element on the same level, it doesn't need to be directly after it. The important thing here is that the elements here share the same parent but the elements doesn't have to come directly after it.

General sibling example:

HTML:

<div> <h2>Not applied</h2> <p>CSS applied</p> <h2>Not applied</h2> <h3>Not applied</h3> <p>CSS applied</p> </div>

CSS:

h2 ~ p { color: red; }

3. Child - uses a greater than sign and it says that any element that is a direct child of the first element should get the style. Now again, you can use multiple here, not just two. So here the rule is that the second element should be a direct child of first element.

Child sibling example:

HTML:

<div> <div>Not applied</div> <p>CSS applied</p> <div>Not applied</div> <article> <p>Not applied</p> </article> <p>CSS applied</p> </div>

CSS:

div > p { color: red; }

4. Descendant - apply the style to all elements that are descendant to the first element. So the second element should be a descendant of the first element, not a direct child. Now this probably is the combinator you use most often.

Child example:

HTML:

<div> <div>Not applied</div> <p>CSS applied</p> <div>Not applied</div> <article> <p>CSS applied</p> </article> <p>CSS applied</p> </div>

CSS:

div p { color: red; }

So, use combinators if they allow you to be more precise but you should be aware that direct selectors without combinators are showing a little bit of a better performance.