Removing underlining from certain elements inside a

Question

I am using a Chrome plugin to apply custom stylesheet tweaks to someone else's website (i.e. I can't change the HTML).

I would like to stop underlining italic () text inside an underline () element, while retaining normal underlining for other parts inside the .

For example these are the kind of thing I'm after:

<u>Foo</u>                --> Foo (underlined)
<u><i>Bar</i></u>         --> Bar (not underlined)
<u>Foo <i>Bar</i></u>     --> Foo (underlined) Bar (not underlined)

I tried:

u i {
  text-decoration: none !important;
}

But found that changing the text-decoration for the  makes no difference. The outer  seems to be the one that determines the text-decoration.

Is there a way to do this?

I understand this might be a duplicate of Is there a CSS parent selector? but hoping someone might be able to come up with a clever workround for this specific case.

don't use u tags for underlining in html 5 - it's semantic meaning has changed https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u. Same with italic and the i tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i — Pete, Dec 13 '18 at 10:19
The first thing in my mind after reading your question is using pseudo element to simulate the underline. — Tyler Bean, Dec 13 '18 at 10:21
no thats no going to work as the parent `` style is for the whole element and ``is just a child that can have its own underline. there is no way in css to do something like `u:not-child-text { text-decoration: none; }`. i think it could be done with javascript, but as you are using a plugin (fiddler) to insert css on top, i guess there is no way — Dirk, Dec 13 '18 at 10:21

score 4 · Accepted Answer · answered Dec 13 '18 at 10:24

4

Yes.

Apply display:inline-block to the child NOT to be underlined.

u {
font-size:3rem
}

u i {
  text-decoration: none !important;
  display: inline-block;
}

<u>Foo <i>Bar</i></u>

answered Dec 13 '18 at 10:24

Paulie_D

95,305
9
106
134

score 3 · Answer 2 · answered Dec 13 '18 at 10:24

3

Set white color to text-decoration-color ofi

u i {
    text-decoration: white solid underline;
}

<u>Foo <i>Bar</i></u>

answered Dec 13 '18 at 10:24

לבני מלכה

14,372
2
15
38

Thanks! I love Stack Overflow! Both of the main answers here work (although I suppose have minor side-effects). I've upvoted them both, but I'm going to accept Paulie_D's because it's the one I've decided to use. – ᴇʟᴇvᴀтᴇ Dec 13 '18 at 10:34
use what you want to :) I really happy to help ; happy coding – לבני מלכה Dec 13 '18 at 10:35

Removing underlining from certain elements inside a

2 Answers2