CODEWITHSUNDEEP
htmlcsscss-selectorshtml-lists
MonkeyZeus
MonkeyZeus

Reputation: 20747

Direct children (Child combinator) selector not restricting to children

Why do the nested <ol> list items receive the sqpurple.gif bullet?

ul > li {
  list-style: outside url("https://www.w3schools.com/cssref/sqpurple.gif") disc;
}
<ul>
  <li>&lt;ul&gt; - parent
    <ol>
      <li>&lt;ol&gt; - parent. Shouldn't this be a number?</li>
    </ol>
  </li>
</ul>

Windows 10 x64
Chrome v91.0.4472.114
Firefox v89.0.1
Edge v91.0.864.67

Upvotes: 1

Views: 522

Answers (3)

isherwood
isherwood

Reputation: 61114

I had to puzzle this one out, too, and I've been doing CSS for more than 20 years. The best way to explain it, I think, is that the rule is inherited, not the selector. That is, any element inside the selected element gets the rule, and since any li accepts a list-style property rule, it applies.

As others have demonstrated, the solution is to override for interior list items. You may also be able to implement the :not pseudo-selector to be more restrictive in your selector. (Actually, you can't, at least using combinators).

Upvotes: 1

MonkeyZeus
MonkeyZeus

Reputation: 20747

Per https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image:

Note: This property is applied to list items, i.e. elements with display: list-item; by default this includes <li> elements. Because this property is inherited, it can be set on the parent element (normally <ol> or <ul>) to let it apply to all list items.

To fix this you should reset the <ol> to have no image.

The use of ul > li is flawed since you should be setting the list-style-image property on the <ul> or <ol>

ul {
  list-style-image: url("https://www.w3schools.com/cssref/sqpurple.gif");
}

ol {
  list-style-image: none;
}
<ul>
  <li>&lt;ul&gt; - parent
    <ol>
      <li>&lt;ol&gt; - parent. This is now a number as expected!
        <ul>
          <li>&lt;ul&gt; - parent</li>
        </ul>
      </li>
    </ol>
  </li>
</ul>

Upvotes: 1

MA-Moustache
MA-Moustache

Reputation: 335

Here is a similar post: https://stackoverflow.com/a/6367905/9730836

You can reset the style to every children (as there is inheritance).

Try:

ul>li {
  list-style: outside url("https://www.w3schools.com/cssref/sqpurple.gif") disc;
}

li * {
  list-style: initial;
}
<ul>
  <li>&lt;ul&gt; - parent
    <ol>
      <li>&lt;ol&gt; - parent. Shouldn't this be a number?</li>
    </ol>
  </li>
</ul>

Upvotes: 0

Related Questions