Is it true that text-transform in CSS cannot be overridden or altered?

Despite my efforts to style the text in a specific way, I am puzzled as to why some OTHER text and line 2 are displaying with a red underline effect. I made sure to set the text-decoration to none for both .line2 and .others classes.

I attempted using `text-decoration:none' for both .line2 and .others classes, but the text continued to appear with a red underline.

    <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>

Answer №1

Initially, it may appear strange, but this behavior is actually a part of the CSS specification:

While this property is not inherited, elements are expected to mimic their parent's styling. For example, if an element has an underline, that underline should extend across its child elements. The color of the underline will remain consistent even if descendant elements have different 'color' values.

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

This form of inheritance is unique and distinct from regular CSS inheritance, making it difficult to override with other rules, more specific selectors, or !important.

One could speculate that text-decoration effects were initially intended for inline rather than block elements. Consider a link containing a span within it - it would be logical for the span to inherit the text-decoration properties of its parent link.

There's no clear solution without modifying the HTML structure. The simplest way to circumvent this issue is by refraining from applying text-decoration to block-level elements (especially 'container' blocks like your <div class="line">). You might consider something similar to:

<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>

Great discovery, though - there's always something new to learn!

Answer №2

Here is an alternative option:

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

   .highlight .line2 {color:orange; text-transform:none; text-decoration: none;}

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

   <body>
   <div class='highlight'>
       <div class="em">line 1</div>
       <div class='more'><BR>some ADDITIONAL text<BR></DIV>
       <div class='line2'>
           <BR>line 2
       </div>
   </div>
   </body>
   </html>

Answer №3

Consider refining the specificity of your CSS selectors

div.examples
div.second-item

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customizing the CSS for individual posts in WordPress based on their post

I am interested in establishing a unique look for each individual post on my wordpress.org blog. Is there a way to customize the CSS code of individual posts without changing the design of other posts? I have tried using categories to create a new PHP fi ...

Is there a way to turn off step navigation in bootstrap?

Displayed below is a visual representation of the bootstrap step navigation component. Presently, there is an unseen 'next' button located at the bottom of the page. When this 'next' button is pressed, it transitions from 'step-1 ...

Excessive width of the lower border

I have a dropdown menu on my website and I wanted to add a border-bottom to the menu. However, the border appears too wide. I went through every step of this solution as it seemed like the same problem, but nothing seems to be working. It would be great i ...

The sticky navigation bar becomes fixed at the top prematurely

Having a sticky navbar on my Bootstrap-based website, I've implemented the following jQuery code: $(document).ready(function () { var flag = false; function stickNav() { $(".navbar-default").affix({ o ...

The children elements inside a parent div with Flexbox are now taking on the height of their container

I am facing an issue with my flexbox grid layout where one column contains a tall image while another column has two shorter images stacked on top of each other. The problem arises when viewing the layout in Internet Explorer, as the height of the smaller ...

Switch up the linear gradient background periodically

Is there a way to change the background after a certain amount of time? It seems to work fine if the background color is just a solid color, but when it's a gradient as shown in the code below, the solution doesn't seem to work. Any suggestions f ...

Interactive pop-up window featuring a top section, main content, and bottom section

I have a situation where I've created a modal with sticky headers and footers, and the middle section scrolls based on the content. Everything looks great on Desktop, but when viewed on mobile or tablet devices, the footer is stretched and not fully ...

Position multiple div elements at the top with CSS alignment

Hey there! I have a question about the HTML and CSS code snippet below. I'm trying to align the text in the <h2> tags at the top for all three <div class="article-col-3"> containers, but it's currently aligned at the bottom. ...

The reverse of the alt text is displayed

Utilizing a right-to-left language with dir='rtl' on the body element. This causes the entire page to flow correctly from right to left. However, the alt text within images is showing up in reverse for some reason. Check out this jsFiddle link ...

Struggling with updating the background color of multiple HTML elements with the same class in real-time

I'm facing an issue with dynamically updating background colors of specific elements using ajax, JSP, and a servlet call. Even though all the lines of code seem to be executing, there is no visible change on the front end. I've attached my JS fun ...

Align the button at the center of the carousel

While working on a personal HTML/CSS/Bootstrap 5 project as a self-taught learner, I have encountered some beginner doubts. My challenge is to ensure that the site remains responsive across various devices such as mobile and tablet. Specifically, I am stru ...

Updating the .css file through the graphical user interface, within the managed bean

I have created a jsf page with colorpickers to allow an administrator to modify the main theme of the site, which consists of 4 colors. I have prefixed my main colors in the css file with numbers like this: .element{ background: /*1*/#333333; } When ...

Preventing the element from breaking when it is not the child: Tips and Tricks

In order to align both .quote-container and #new-quote elements in the same line, even when the window width is very small (e.g., 83 pixels), I used min-width on the .quote-container element successfully. However, applying the same technique to the #new-qu ...

The website is not displaying CSS styles as intended

I'm currently in the process of building a website with Bootstrap 5, but I've encountered an issue where the properties from index.css are not taking effect on index.html. Specifically, when I hover over a service card, the background is supposed ...

The condition is not being recognized after clicking the third button

When the button is clicked for the first time in the code snippet below, all divs except for the red one should fade out. With each subsequent click, the opacity of the next div with a higher stack order should be set to 1. Everything works fine until the ...

What could be causing a full-width image render in Firefox when a nested flex item is centered?

My design involves nested containers with the display: flex; property. While Chrome/Edge display the item div correctly, in Firefox 110.0.1 the item div expands to fill the entire horizontal space within the wrapper (100% width). Which CSS properties can ...

Animated Content Sliding out Smoothly from Right to Left Using jQuery

I am attempting to implement a slideout function from the right side using jQuery. I have tried modifying the code for "From Left to Right" but it doesn't seem to be working correctly. Can you please provide me with guidance on how to make the necessa ...

Is it possible to line up two divs perfectly?

Hey there, I'm still trying to get the hang of CSS and using Dreamweaver CS6's fluid grid layout. In my attempt to create a header with two divs inside it - headerleft for an image and headerright for text - I've run into some alignment issu ...

What is the best way to create exclusive toggle buttons using jQuery?

I am currently working on a project where I need to create functionality for three buttons, each triggering a unique graph effect. The key requirement is that when one button is pressed, the other two should be deactivated along with their corresponding fu ...

Scroll Behavior Issue in Bootstrap 4.4.1 Accordion Component on Google Chrome - Possible Bug?

I've been using Bootstrap accordions for quite some time, but a new issue has recently cropped up. If you play around with the code below (preferably in full screen mode), scroll down until the accordion is visible, then open the middle card by toggl ...