1

It probably is a specificity priority order that I dont get.

Here is the html code:

<div class="side-panel__item side-panel__item-active">
  <p>Client Statistics</p>
  <div class="side-panel__sub-container">
    <p class="test">Option 1</p>
    <p class="test">Option 2</p>
  </div>
</div>

And the css code:

.side-panel__item-active {
    color: orange;
    text-decoration: underline;
}

.test {
    color: #444;
    text-decoration: none;
}

Expected behavior was that the text-decoration in .test would override the text:decoration inherited from .side-panel__item-active.

But it doesnt. The color on the other hand is changing fine.

I want to understand what is happening here. I would assume specificity order and the parent div having 2 classes but then again, why one declaration works ( color: #444 ) and the other doesnt?

.test overrides the color but not the text-decoration. What am I missing?

Developer404
  • 11
  • 2
  • 1
    If you only need the first p tag to have text-decoration then that's where you should apply it. You cannot override it on a child text element https://stackoverflow.com/a/36134860/7657915 – JHeth Feb 11 '23 at 00:08

2 Answers2

0

To be honest this had me scratching my head. but Try this css

side-panel__item-active p{
    color: orange;
    text-decoration: underline;
}

.test {
    color: #444;
    text-decoration: none;
}
Nashie
  • 311
  • 1
  • 10
  • Thanks but I know how to fix it if I change my CSS. I would like to understand what is happening with the current format. Why color overrides the previous style but text decoration does not. – Developer404 Feb 11 '23 at 02:05
0

It can work, provided:

that text decorations are not propagated to any out-of-flow descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables. They are also not propagated to inline children of inline boxes, although the decoration is applied to such boxes.

(W3 Consortium note on the subject, 2. Line Decoration: Underline, Overline, and Strike-Through, First note in green).

.side-panel__item-active {
    color: orange;
    text-decoration: underline;
}

.test {
    display: inline-block; /* [MANDATORY] */
    color: #444;
    text-decoration-color: none;
}
<div class="side-panel__item side-panel__item-active">
    <p>Client Statistics</p>
    <div class="side-panel__sub-container">
        <p class="test">Option 1</p><br>
        <p class="test">Option 2</p>
    </div>
</div>
Rene van der Lende
  • 4,992
  • 2
  • 14
  • 25
  • This does not explain why "test" color declaration overrides the previous style but text-decoration doesn't – Developer404 Feb 11 '23 at 02:03
  • True, but as JHeth already commented, it simply is not supported as such, which can be derived from either the MDN link in the other SO answer or the W3C link I posted. Not supported unless ... (note). I'm dumbfounded by the spec as well, but that isn't a first and certainly won't be the last. Remove my answer? Your call... – Rene van der Lende Feb 11 '23 at 02:48
  • Yes JHeth explains it fine. Can't mark him as accepted answer though because he is in comments. Also, no reason to remove your answer. It still is valuable information on the subject even if it not answers it completely – Developer404 Feb 11 '23 at 09:18