0

I am a CSS noob who's just learned that you cannot directly remove inherited text-decoration property in sub-elements.

So this begs the question listed in the title

One example is a list hierarchy: How to make the black sub-list have no strike through even when the purple super-list has struck through?

Workarounds I have seen involve breaking the sub-element out of the normal flow as done by setting things like display: absolute or display: inline-block (I think that's correct?) and then move it using other properties?

<ul class="main">
  <li class="purple striked">Item One</li>
  <li class="purple striked">Item Two
    <ul class="striked">
      <li>2.1</li>
      <li>2.2</li>
    </ul>
  </li>
  <li class="purple striked">Item Three
    <ul class="black plain">
      <li>3.1
        <ul>
          <li>3.1.1</li>
          <li>3.1.2</li>
        </ul>
      </li>
      <li>3.2</li>
    </ul>
  </li>
</ul>

.purple {
    color: rebeccapurple;
}

.black {
    color: black;
}

.striked {
    text-decoration: line-through;
}

.plain {
    text-decoration: none;
}

So in general, what is the 'best practice' for this kind of stuff? Or is this a limitation of CSS that people just have to work around for their specific situations?

It doesn't seem like it is possible in a 'turning complete' way to have any sub-text not be a sub-element

EDIT I had tried setting things like text-decorate: none; or text-decorate: initial or text-decorate: unset for my example as mentioned in Reset/remove CSS styles for element only but those didn't work.

Is it correct to say that inheritance isn't the issue, but has to do with it rendering in the entire super-element area, which contains the sub-element area? And that thus disabling the sub-element property only prevents it from contributing that?

wamster
  • 128
  • 10
  • I had tried setting `text-decorate: initial` but that didn't work. I wonder thats its not an inheritance issue since its drawn on to the element space by the super element? Like you don't notice it with background colors since you can easily set the background color to white again in the sub-element, but you can't do that with text-decorations – wamster Oct 13 '21 at 06:42

0 Answers0