Text transform cannot be changed / overwritten? (CSS)
I am learning css and I don't understand why some OTHER text and line 2 has a red underline effect. I thought I either changed it for other classes or reset it not for class line2
I tried "text-decoration: none" for both .line2 and .other lines and the text was still red.
<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>
a source to share
It seems strange at first, but this behavior is built into the CSS spec:
This property is not inherited, but the elements must match their parent. For example, if an element is underlined, the line must span the children. The underline color will remain the same even if the descendant elements have different color values.
See http://www.w3.org/TR/REC-CSS1/#text-decoration .
This is kind of inheritance, different from standard CSS inheritance, so you cannot override it with other rules, more specific selectors, or important ones.
I would guess because the text decode effects were originally intended to be applied to inline and not block elements. Imagine a link with spacing within it - it makes sense for the span to apply the text-decoration properties of the parent link.
There is really no fix without HTML customization. The easiest way to avoid this problem is to avoid setting the text decoration of blocks (especially "containers" such as yours <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>
Nice find though - it's always good to learn something new!
a source to share
Use this instead:
<html>
<head>
<style type="text/css">
.line .em {color:red; text-transform:uppercase; text-decoration:underline;}
.line .line2 {color:blue; text-transform:none; text-decoration: none;}
.line .others {color:black; text-transform:lowercase; text-decoration:blink; font-weight:bold;}
</style>
</head>
<body>
<div class='line'>
<div class="em">line 1</div>
<div class='others'><BR>some OTHER text<BR></DIV>
<div class='line2'>
<BR>line 2
</div>
</div>
</body>
</html>
a source to share