How to disable CSS style relatively to a certain parent tag?

Question

This is my HTML:

<!DOCTYPE html>
<html>
<style>span {text-decoration: none}</style>
<body>
<a href="#">underscored text <span>without underscore</span></a>
</body></html>

The <span> remains underscored. What is a possible workaround (without JavaScript and without changing the HTML)?

Refer http://stackoverflow.com/questions/1823341/how-do-i-get-this-css-text-decoration-override-to-work — Ankur, Nov 18 '12 at 17:36

score 4 · Accepted Answer · edited May 23 '17 at 11:48

4

Try this

<!DOCTYPE html>
<html>
<style>span {text-decoration: none;display: inline-block;}</style>
<body>
<a href="#">underscored text <span>without underscore</span></a>
</body></html>

Link to original answer : https://stackoverflow.com/a/10478962/662250

Working fiddle

edited May 23 '17 at 11:48

Community

1
1

answered Nov 18 '12 at 17:38

Ankur

12,676
7
37
67

yeah thats why I gave link to original answer :) – Ankur Nov 18 '12 at 17:39
The reason is explained [here](http://stackoverflow.com/questions/4481318/css-text-decoration-property-cannot-be-overridden-by-child-element), if someone interested – Filkor Nov 18 '12 at 17:51

score 1 · Answer 2 · answered Nov 18 '12 at 17:31

1

Set it up so that the anchor tag has no underline, but the span DOES have an underline

<a href="#"><span>underscored text</span> without underscore</a>

a{
  text-decoration:none;
}

a span{
  text-decoration:underline;
}

answered Nov 18 '12 at 17:31

DevonRW

362
1
4

I can't change the HTML, only CSS – yegor256 Nov 18 '12 at 17:32

score 0 · Answer 3 · answered Nov 18 '12 at 17:41

I don't think there is a way so here is a dirty hack:

<html>
<style>
    span {border-bottom:1px solid white;}
    a {text-decoration: none;border-bottom:1px solid blue;}
    </style>
<body>
<a href="#">underscored text <span>without underscore</span></a>
</body></html>

... only because you mentioned you can't change the HTML.

How to disable CSS style relatively to a certain parent tag?

3 Answers3