Override text-decoration on child element [closed]

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>

Answer 1

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

Answer 2

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;
}

Answer 3

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;
}

Answer 4

As jQuery is tagged you can do this:

$('.parent').contents().filter(function(i,el){
  return el.nodeType === 3;
}).wrap('<em>')

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>