DEV Community

Calin Baenen
Calin Baenen

Posted on

What's the difference between CSS `s1 s2 {}` and `s1 > s2 {}`, and how do they cascade?

#css #webdev #help

So, I tried both .no-markers ::marker and .no-markers > ::marker and did:

<ul class="no-markers">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

And they both removed the markers from the list.
So, my first question is "Do any nested elements, so long as somewhere down the line they are in a .selector mean that that element gets that style?".
And, I thought s1 > s2 styled elements directly under s1, so, logically, my second question is "What's the difference between s1 s2 and s1 > s2?".

Thanks!
Cheers!

Top comments (9)

Collapse
 
endymion1818 profile image
Ben Read •

s1 s2 {…} will select any child of s1, where as s1 > s2 {…} will select only direct children.

Collapse
 
calinzbaenen profile image
Calin Baenen •

Then how come s1 > s2 still removed the ::markers from the li despite no-markers being applied to the ul?

Collapse
 
endymion1818 profile image
Ben Read •

Because of the space between the declarations. Take a look at this for a comparison. codepen.io/endymion1818/pen/WNMMpwO

Thread Thread
 
calinzbaenen profile image
Calin Baenen • • Edited

But there's no > there.
Or is that only required when two tag selectors need to be disambiguated?

Thread Thread
 
endymion1818 profile image
Ben Read • • Edited

Yes you're close, the space signifies selecting a child in this case.

Collapse
 
gabrielpedroza profile image
Gabriel Pedroza •

s1 s2 selects all the child(s) of s1.

So anything that is nested in s1 that is an s2 will be selected

s1 > s2 selects the direct child(s) of s1.

So anything that is directly nested and is a child of s1 and is an s2 will be selected

In your example, it would not make a difference which one you chose because you only have direct children in your

    element. If you had something like 
<ul>
  <li></li>
  <li></li>
  <li>
    <li>(Nested list item so this means it is not a direct child of the <ul> element)If using ul > li, this **would not** be selected. If using ul li, this **would be** selected</li>
  </li>
</ul>
Collapse
 
calinzbaenen profile image
Calin Baenen •

Alright.
As I told someone else, I was just simply fooled by Chrome's dev console, which straight up lies.
Example of Chrome saying raw `::marker` endraw s exist inside raw `li` endraw s.

Collapse
 
calinzbaenen profile image
Calin Baenen •

Speaking of CSS, I think DEV needs a CSS check. . .

Collapse
 
calinzbaenen profile image
Calin Baenen • • Edited

Huh. That's weird.
According to the Chrome console it looked like the ::marker elements were children of the li, and I somewhat believed that because no markers appear when there are no list items.
Would you know anything about this?

Thanks for your help.

Read next

spicecoder profile image

Hierarchical Flattening: The Secret to Managing Complexity in Software Design

pronab pal -

jhernandez504 profile image

Intro Into Bulma CSS: How Good Is It?

Jeremy Hernandez -

oculus42 profile image

Do we need Promise.allSettled()?

Samuel Rouse -

raja_yadav profile image

Boost Your Business with Professional Web Development & Cybersecurity Solutions!

Raja Yadav -