-1

HTML example:

<span>line1</span>
<div id="div1" class="no-underline">
    <div id="div2" class="no-underline">subline1</div>
    <div>subline2</div>
</div>

body {
    font-family: Arial;
    font-size: 8px;
    color: rgb(255, 0, 85);
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
}
#div1 {
    color: black !important;
}
#div2 {
    color: green;
}
.no-underline {
    text-decoration:none !important;
}

The result is :

  • line1: red and underlined
  • subline1: green and underlined
  • subline2: black and underlined

Demo here

I want subline1 and subline2 not underlined. But body's style should stay at my case.

How is this possible?

Oriol
  • 274,082
  • 63
  • 437
  • 513
Giannis Grivas
  • 3,374
  • 1
  • 18
  • 38
  • The `!important` should be next to, a part of, the property-value you're trying to denote as important (`text-decoration: none !important;`), not in little enclosures of their own. – David Thomas Sep 09 '14 at 23:05
  • You are saying that all the things within the `` should be underlined with `text-decoration: underline;`... just delete that bit and use it on the html elements that need it. – Francisco Presencia Sep 09 '14 at 23:06
  • Cannot do that because i want body to have inlinde css .I am using radeditor as email editor and there is a need to be set as default options. – Giannis Grivas Sep 09 '14 at 23:08
  • @Csdtesting I have edited your question because so much inline styles make it unreadable. – Oriol Sep 09 '14 at 23:19
  • Although i know that inline css is a bad practice , i am trying to use raeditor as email editor and is the way it passes default options.So the structure is something like the sample and i cannot edit that,i have to find a fix to that. – Giannis Grivas Sep 09 '14 at 23:20
  • possible duplicate of [How do I get this CSS text-decoration override to work?](http://stackoverflow.com/questions/1823341/how-do-i-get-this-css-text-decoration-override-to-work) – Oriol Sep 09 '14 at 23:25
  • No this is not.We have text-decoration inherited only display : inline-block solves the problem! – Giannis Grivas Sep 10 '14 at 13:55

3 Answers3

2

First I would recommend to avoid using inline Css and !important, that's a bad practice and will make your code very hard to modify later. one solution would be to put your text decoration on the span: 

<span style ="text-decoration: underline;">
line1
</span>
Hassene Benammou
  • 369
  • 2
  • 4
  • 11
1

You can get rid of text-decoration set on an ancestor using

display: inline-block;

Since in your case your elements are blocks, you may also want

width: 100%;

to make them more block-like.

Demo

Oriol
  • 274,082
  • 63
  • 437
  • 513
0

Here you go! http://jsfiddle.net/41ragvd2/

<body style="font-family: Arial; font-size: 8px; color: rgb(255, 0, 85); font-weight: bold; font-style: italic;" >
<span style="text-decoration: underline;">
line1
</span>

<div style="color:black; !important;">
<div style="color:green; !important;">
subline1
</div>

<div>
subline2
</div
</div>
</body>
racecarjonathan
  • 1,244
  • 1
  • 11
  • 22