What combinator selectors should I be familiar with?

Frequently Asked Questions CSS FAQ
1

Question

What combinator selectors should I be familiar with?

Answer

Developers will see descendant and child combinator selectors often, but should also be familiar with adjacent sibling and general sibling combinator selectors.

Examples of each:

/* Descendant Selector - will target all elements with a class of "my-class" 
that are a descendant of a <div> element (including a direct child, 
children of children, etc) */
div .my-class {
  ...
}

/* Child Selector - will target any elements with a class of 
"another-class" that are a direct child of a <p> element */
p > .another-class {
  ...
}

/* Adjacent Sibling Selector - will target any <div> element that is the
next sibling of an element with an id of "unique-id" */
#unique-id + div {
  ...
}

/* General Sibling Selector - will target any <p> elements that are the
next siblings of an element with a class of "class-name" */
.class-name ~ p {
  ...
}
1 Like
2

Hello,

Could you help clarify the CSS selectors you mentioned by providing HTML examples of what those combinations look like?

Thank you very much.

2 Likes
3 
div .my-class

<div>
<p class="my-class">A descendant of DIV</p>
</div>

p > .another-class

<p>A paragraph with a <span class="another-class">direct child</span></p>

#unique-id + div

<div id="unique-id">

</div>
<div>
<!-- selects this adjacent sibling IF it is a DIV -->
</div>

.class-name ~ p

<div class="class-name">Not this one</div>
<p>This one</p>
<p>This one</p>
<p>This one</p>

Be sure to verify this with some follow up reading.

16 Likes
4

Beautifully illustrated, thank you !!

2 Likes
5

I tried to type this without a space between div and .my-class and it didn’t work. After I added the space, it worked. Why do we need a space in between div and .my-class?
And in this exercise, it needs a space between article and .receipe? Thanks.

article .recipe {
font-weight: bold;
}

1 Like
6

this post helps me a lot ! thanks!

7

If you don’t add a space between div and .my-class, the selector is targeting a different element. div.my-class will select all the <div> elements with a class of my-class while div .my-class selects all the elements with a class of my-class that are descendants of a <div> element. The same thing applies with the article .recipe and article.recipe selectors

2 Likes
8 
type.class       =>  specific selector

type .class      =>  child combinator

type > .class    =>  direct child combinator
4 Likes
9

I´ve been playing with the child combinator for a bit and I came across an example on the MDN with a red border on list elements. Then I tried to add a color to that and ended up being confused why the rule got only applied to the border.

Can someone explain this to me (see screenshot attached)?

PastedGraphic-3
PastedGraphic-31226×179 44 KB

1 Like
10

ul > li is selecting all of the li elements that are direct children of the ul element. The color property is inheritable by default, so not only do the direct children of the ul get a color of royalblue, but the children of the lis also get it

The border-top: 5px solid red declaration is setting the top border of the lis which are direct children of the ul to be 5 pixels, and red. As this property is not inheritable, the grandchildren elements of the ul won’t have a top border

1 Like
11

Thank you for your quick answer.

Do you have to remember which property is inherited and which is not or is there a way to tell?

1 Like
12

You won’t remember every single inheritable property, but you can always refer to this StackOverflow answer

If you want a child element to inherit a property that isn’t inheritable, just select the child element, and set the uninheritable property to inherit

1 Like
13

Thank you that was very helpful.

I also found a good article about this topic in case other people are wondering aswell:
CSS Inheritance

1 Like
14

Thanks for this, I was struggling trying to wrap my head around it

1 Like
15

Thanks a lot! That really helped me out :pray