How to cancel the inheritance of the "li:before {content: 'text'}" without reassigning it for each
element?

Question

everyone!

The general goal is that all li elements for which a property is not explicitly declared use the standard value.

I don't understand why the content property can't be reset:

ul {
 position: relative;
 list-style: none;
 margin-left: 0;
 padding-left: 1.2em;
}

li:before {
 content: unset;
}

ul > li:before {
 content: "A";
 position: absolute;
 left: 0;
}

ul > ul > li:before {
 content: "B";
 position: absolute;
 left: 0;
}

<ul>
 <li>Level 1 Item 1</li>
 <ul>
  <li>Level 2 Item 1</li>
  <ul>
   <li>Level 3 Item 1</li>
   <li>Level 3 Item 2</li>
   <li>Level 3 Item 3</li>
  </ul>
 </ul>
</ul>

Result:

But shouldn't the result be like this:

How can I fix this so that the result is the same as in the last picture?

@BoltClock thanks for support to insert image. I think maybe I should change the title of the question: How to cancel the inheritance of the "content property" without reassigning it for each
Good call, you may make further edits to your own question. I'm currently writing an answer. — BoltClock, Apr 24 '21 at 05:33
You should use the DOM inspector to see how the styles are applied to an element. — Barmar, Apr 24 '21 at 05:34
**Your HTML is invalid to begin with. It needs to be fixed before anything else can be addressed.** `ul` can only have `li`, `script` and `template` children. That being said, `ul > ul` is not supposed to **ever** match an element, and if it does, that is most certainly a violation of the spec and could (and honestly **should**) stop working at any point in time. — connexo, Apr 24 '21 at 07:03
@connexo That is, if I want to create an attachment, I need to declare the new level as "ul > li > ul"? — isNaN, Apr 24 '21 at 11:12
If you need to nest `ul`s, the nested `ul`s need to reside in `li`. — connexo, Apr 24 '21 at 13:49

score 0 · Answer 1 · answered Apr 24 '21 at 05:33

0

Try adding a class to your ul tags. I made a slight change in your second li selector by removing ul > li > li:before to ul.myClass > li:before. Run the code snippet and you will see your desired output

ul {
 position: relative;
 list-style: none;
 margin-left: 0;
 padding-left: 1.2em;
}

li:before {
 content: unset;
}

ul.myParentClass > li:before {
 content: "A";
 position: absolute;
 left: 0;
}

ul.myClass > li:before {
 content: "B";
 position: absolute;
 left: 0;
}

<ul class="myParentClass">
 <li>Level 1 Item 1</li>
 <ul class="myClass">
  <li>Level 2 Item 1</li>
  <ul>
   <li>Level 3 Item 1</li>
   <li>Level 3 Item 2</li>
   <li>Level 3 Item 3</li>
  </ul>
 </ul>
</ul>

answered Apr 24 '21 at 05:33

Mir entafaz Ali

927
6
13

My goal is to do without class selectors ( – isNaN Apr 24 '21 at 05:36
It's just that I plan to use a huge number of sub-lists. – isNaN Apr 24 '21 at 05:37
Do you have another `ul` inside `level 3` `li` element? – Mir entafaz Ali Apr 24 '21 at 05:56
Yes, it is possible. I just need a general plan solution, how to undo inheritance without reassigning the property for each sublevel – isNaN Apr 24 '21 at 05:59
Okay if that's a possibility then you need to use JS. The solution I can think of is using a `function` which will check if the list you're trying to render has `child` list element or not. Based upon that you should add a class to the `ul` which doesn't have any child element. Also instead of setting the content, you can use `list-style-type:upper-alpha;` – Mir entafaz Ali Apr 24 '21 at 06:09
I found my mistake and solutions. I'll add an explanation to the question. – isNaN Apr 24 '21 at 06:11

BoltClock · Answer 2 · 2021-04-24T05:51:04.910

0

You're unsetting it with a simple li:before selector. That's going to be overridden by your other rules with ul >s, in particular the most specific ul > ul > li:before because it includes your level 3 items (children of the level 2 and level 1 ul elements). You'll need another one of these selectors, nested 3 levels, to unset it for those particular items:

ul {
 position: relative;
 list-style: none;
 margin-left: 0;
 padding-left: 1.2em;
}

ul > li:before {
 content: "A";
 position: absolute;
 left: 0;
}

ul > ul > li:before {
 content: "B";
 position: absolute;
 left: 0;
}

ul > ul > ul > li:before {
 content: unset;
}

<ul>
 <li>Level 1 Item 1</li>
 <ul>
  <li>Level 2 Item 1</li>
  <ul>
   <li>Level 3 Item 1</li>
   <li>Level 3 Item 2</li>
   <li>Level 3 Item 3</li>
  </ul>
 </ul>
</ul>

On a side note, I'd recommend either

(recommended) changing :before to ::before since you're writing CSS3 that's not going to work in CSS2-only browsers anyway, or
using content: none instead of content: unset, which will allow your code to be supported in CSS2-only browsers, if you care about that

edited Apr 24 '21 at 05:51

answered Apr 24 '21 at 05:36

BoltClock

700,868
160
1,392
1,356

I may have specified the target incorrectly. The task is to make an unset for those li elements that do not have a property specified. – isNaN Apr 24 '21 at 05:39
Please tell me how I can clarify my question. Should I add more code? – isNaN Apr 24 '21 at 05:42
@isNaN: The content property isn't inherited. It's just that your selectors are matching your nested li elements (which isn't a mistake on your part, just a limitation of selectors). I suppose you could clarify what you mean by "li elements that do not have a property specified" - what property exactly? – BoltClock Apr 24 '21 at 05:45
For "Level 3 Item 1", I don't specify the content property, but it still inherits from "Level 2 Item 1" – isNaN Apr 24 '21 at 05:47
From the selector's point of view, is this the right thing to do? ul > ul > li:before {content: "B";}, but "Level 3 Item 1" is ul > ul > ul > li:before – isNaN Apr 24 '21 at 05:50
@isNaN: I've added an explanation to my answer. Not sure it's my best explanation but let me know if it helps. – BoltClock Apr 24 '21 at 05:51
Tell me, do I understand correctly that inheritance cannot be undone, if I do not use reassignments for each sublevel? – isNaN Apr 24 '21 at 05:56
@isNaN: As I said earlier, there is no inheritance in the first place. You can't sever an inheritance chain that isn't there. – BoltClock Apr 24 '21 at 06:01
My brain is about to explode. Well, I applied the CSS rule: "ul > ul > li::before { content: 'B'; }" why is this added to "ul > ul > ul > li::before" ? – isNaN Apr 24 '21 at 06:04
@isNaN: Because "ul > **ul > ul > li::before**" – BoltClock Apr 24 '21 at 06:09
I found my mistake and solutions. I'll add an explanation to the question. – isNaN Apr 24 '21 at 06:09
BoltClock, YES, this is my mistake, I realized it. – isNaN Apr 24 '21 at 06:10
My solution: "*:not(ul) > ul > ul > li::before" – isNaN Apr 24 '21 at 06:14
ul > ul > li::before"> Thank you. I guessed that, too. I wish you had mentioned this point earlier. Updated: Well, thank you. – isNaN Apr 24 '21 at 06:15
@isNaN: That's a good approach! You can post it as your own answer. As you're new to the site I'd also like to inform you that we try to avoid extended discussions in comments, so avoid posting multiple comments in a row if you can help it. You can edit your own comments for 5 minutes at a time. – BoltClock Apr 24 '21 at 06:16
The HTML is invalid to begin with. It needs to be fixed before anything else can be addressed. `ul` can only have `li`, `script` and `template` children. That being said, `ul > ul` is not supposed to **ever** match an element, and if it does, that is most certainly a violation of the spec and could (and honestly **should**) stop working at any point in time. – connexo Apr 24 '21 at 07:05
Also, your 2 recommendations at the end of your post contradict. Edit: I see you wrote "*either*" in the introduction to those two points. Please consider fattening that. – connexo Apr 24 '21 at 07:08
@connexo: Good point on the HTML being invalid, that slipped my mind, but the HTML spec doesn't say that ul > ul must match nothing just because a ul is not allowed to be a child of another ul. While it's questionable to rely on ul > ul matching, it's not a violation of any spec if it does. – BoltClock Apr 24 '21 at 07:12
The spec violation is on the HTML side, `ul` as child of `ul`. On top of that, relying on the browser not to autocorrect that (like it'd do if you had `
` which the browser would automatically turn into `
`) on the CSS side is more than just questionable.
– connexo Apr 24 '21 at 07:19
@connexo: Fair enough, you were saying earlier that ul > ul matching was a spec violation and that's what I was disagreeing with. The debate of selectors matching in invalid documents is one that's been had [elsewhere on SO at length](https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left), and the CSSWG has insisted that they're not responsible for authors writing invalid markup, so I'll leave it at that. – BoltClock Apr 24 '21 at 07:30

score 0 · Answer 3 · answered Apr 24 '21 at 06:19

This question is generated by my inheritance error. I shouldn't have blamed CSS for my problem. CSS did everything right...

Solution (use the check for the absence of the previous level — :not(ul)):

*:not(ul) > ul > ul > li::before {
 content: "B";
 position: absolute;
 left: 0;
}

How to cancel the inheritance of the "li:before {content: 'text'}" without reassigning it for each element?

3 Answers3

How to cancel the inheritance of the "li:before {content: 'text'}" without reassigning it for each
element?