Home/ Questions/Q 772927
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T18:52:55+00:00

I am studying css and I do not understand why some OTHER text and

  • 0

I am studying css and I do not understand why some OTHER text and line 2 has red underline effect on them. I thought I either changed it for class others or reset it to none for class line2

I tried `text-decoration:none’ for both .line2 and .others and the text was still red underlined.

    <html>
    <head>
    <style type="text/css">
    .line {color:red; text-transform:uppercase; text-decoration:underline;}

    .line2 {color:blue; text-transform:none;}

    .others {color:black; text-transform:lowercase; text-decoration:blink; font-weight:bold;}
    </style>
    </head>

    <body>
    <div class='line'>
        line 1
        <div class='others'><BR>some OTHER text<BR></DIV>
        <div class='line2'>
            <BR>line 2
        </div>
    </div>
    </body>
    </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It seems weird at first, but this behaviour is built into the CSS spec:

    This property is not inherited, but elements should match their parent. E.g., if an element is underlined, the line should span the child elements. The color of the underlining will remain the same even if descendant elements have different ‘color’ values.

    See http://www.w3.org/TR/REC-CSS1/#text-decoration.

    This is a kind of special inheritance, different to the standard CSS inheritance, which is why you can’t override it with other rules, more specific selectors, or !important.

    I’d guess it’s because text-decoration effects were originally designed to be applied to inline, not block elements. Imagine a link with a span inside it – it does make sense for the span to adopt the text-decoration properties of the parent link.

    There isn’t really a fix without adjusting the HTML. The easiest way to avoid the problem is to avoid setting text-decoration on blocks (especially ‘container’ blocks like your <div class="line">). I would use something like:

    <html>
<head>
<style type="text/css">
.line {color:red; text-transform:uppercase; text-decoration:underline;}

.line2 {color:blue; text-transform:none;}

.others {color:black; text-transform:lowercase; text-decoration:blink; font-weight:bold;}
</style>
</head>

<body>
<div>
    <span class="line">line 1</span>
    <div class="others"><BR>some OTHER text<BR></DIV>
    <div class="line2">
        <BR>line 2
    </div>
</div>
</body>
</html>

    Good find, though – it’s always good to learn something new!

    • 0