Override text-decoration on child element

Question

I want to override the parent css in child element. I want to underline the parent element, but not the child element.

.parent {
  text-decoration: underline;
  color: red;
}
.child {
  color: green;
  text-decoration: none !important;
}
.sub-child {
  color: green;
  text-decoration: none !important;
}

<div class="parent">Inside parent
  <div class="child">Inside first child
    <div class="sub-child">Inside 1st child of 1st child
    </div>
  </div>
  <div class="child">Inside 2nd child
    <div class="sub-child">Inside 1st child of 2nd child</div>
    <div class="sub-child">Inside 2nd child of 2nd child</div>
  </div>
  <div class="child">
    Inside 3rd child
    <div class="sub-child">Insde 1st child of 3rd child</div>
  </div>
</div>

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. — Paulie_D, Mar 21 '16 at 13:47

score 6 · Answer 1 · answered Mar 21 '16 at 15:14

As stated in MDN

Text decorations draw across descendant elements. This means that it is not possible to disable on a descendant a text decoration that is specified on one of its ancestors.

So, unfortunately, you can't. The only solution is, as others stated here, to wrap the corresponding text with a tag e.g. a span

score 0 · Answer 2 · answered Mar 21 '16 at 13:07

you can do this by adding span in parent element text like this

HTML

<div class="parent"><span class="parent_text">Inside  parent</span>
            <div class="child">Inside first child
                <div class="sub-child">Inside  1st child of 1st child
            </div>
            </div>
            <div class="child"> Inside 2nd child
                    <div class="sub-child">Inside 1st child of 2nd child</div>
                    <div class="sub-child">Inside 2nd child of 2nd child</div>
                </div>
                <div class="child">
                Inside 3rd child
                    <div class="sub-child">Insde 1st child of 3rd child</div>
                </div>
        </div>

CSS

.parent span.parent_text{
    text-decoration:underline;
}

well this is disappointing but it can only be possible with a tag here is a similar question http://stackoverflow.com/questions/1823341/how-do-i-get-this-css-text-decoration-override-to-work/1823388#1823388 — Gaurav Aggarwal, Mar 21 '16 at 13:31

score 0 · Answer 3 · answered Mar 21 '16 at 15:22

As xpy stated, this is not possible and is a limitation of text-decoration that cannot be overridden with the normal cascade or even !important. If you're not willing to add additional markup (like a span), your only other option may be to fake this look by using a border (which will span across your entire div, not just the length of the text), e.g.,

.parent > .child:first-of-type {
        border-top:1px solid red;
}

Override text-decoration on child element

3 Answers3

Linked