What is the reason behind HTML comment delimiters failing to function within HTML style tags?

Currently, I am utilizing CSS and HTML in my project. To implement styles, I am utilizing both an external stylesheet as well as a "style" element within the HTML to override certain styles.

However, I have encountered an issue. When I insert an HTML comment within the "style" element, the style override does not work as expected. Strangely enough, when I use CSS comments instead, the override functions correctly. Since the "style" element is part of HTML, it raises the question: why do HTML comments interfere with the overrides in the "style" element?

As an illustration:

<html>
    <head>
        <title>test</title>
        <style>
            <!-- body{background:#eee;} -->
        </style>
    </head>
    <body></body>
</html>

The provided example showcases the peculiar behavior of the styles being applied despite the presence of comment tags.

Check out the jsFiddle Demo (verified on Chrome 16.0.912.75 Windows 7)

Answer №1

When it comes to commenting on styles, use /* Style */ format, and for HTML make sure to follow the structure above.

Answer №2

CSS differs from markup languages as it is a standalone code block within an HTML page, much like JavaScript in a script block. While HTML comments are recognized throughout the HTML document, they do not function the same way inside a CSS style block.

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

Is it possible to eliminate the *:after effect for specific elements in my CSS?

I struggle with CSS, so I decided to use a library that includes the following CSS code: *, *:before, *:after { box-sizing: inherit ; } While this code works well for some views, it messes up others and is unnecessary for some. For instance, in this b ...

What's the reason for the align-self: flex-end CSS property not working as expected on a flex div element?

I am trying to align the "Click me" button to the left of the div that contains it. Here is my code: render = () => { return ( <Wrapper> <Body> <span>Title</span> <Desc ...

Replace all characters processed by unescape (beyond just &, <, and >) with HTML escape

Is html.escape() symmetrical to .unescape()? The docs state that escape only converts &, <, and >, whereas .unescape handles "all named and numeric character references". How can I escape all characters that .unescape() unescapes? Current behavi ...

Unusual behavior observed in the angular-daterangepicker module

I'm currently working on an Angularjs application and utilizing the angular-daterangepicker to input dates into a table. Upon the initial load of the app, the startDate is automatically set to the current day and the endDate is set to 4 days later. T ...

Exploring jQuery's parent selector for traversing the DOM

I am currently working with an array that inserts articles into my website. I have a specific requirement where, upon clicking the title (h3), I need to display more information based on the article's index. To achieve this, I believe I should travers ...

Update the value of the following element

In the table, each row has three text fields. <tr> <td><input type="text" data-type="number" name="qty[]" /></td> <td><input type="text" data-type="number" name="ucost[]" /></td> <td><input ty ...

Issues with CSS Styling not being applied properly on mobile devices in a React App deployed on Heroku

The Dilemma My React app is deployed on Heroku using create-react-app for bundling. The backend is a Node.js written in Typescript with node version 10.15.3. Locally, when I run the site using npm start, everything works perfectly. However, when I view t ...

Are there any performance implications when using an excessive number of background images in CSS?

My website seems to be running too slowly based on user reports. I suspect that the background images in CSS may be causing the issue. The site uses a custom build system to concatenate and compress all CSS, create CSS sprites automatically, resulting in ...

I am attempting to separate this "for" loop in order to generate five distinct DIV elements

Hello there! I am a beginner and I am attempting to create 5 different players by using some code that I found. Here is the code I have been working with: https://codepen.io/katzkode/pen/ZbxYYG My goal is to divide the loop below into 5 separate divs for ...

Improving JavaScript event management efficiency through handling numerous asynchronous HTTP requests

Summary: In a SPA CMS project, multiple dynamic data sources are causing performance issues due to a large number of asynchronous HTTP calls required to display a table with extensive data. The challenge is to maintain good performance while handling the ...

Tips for using the window.print() function to display and print another php or html page

<script type="text/javascript> window.print('page.php'); //Can you help me understand how to use window.print() function to print another php or html page? ...

Import information from a website into MATLAB, including embedded internal frames (iframes)

Recently, I've been using MATLAB's urlread function to fetch website content for further analysis. However, I encountered a specific site where the data I'm looking for is housed within an internal frame embedded in the main index.php file ...

Unable to assign the second value of the <input type="datetime-local" /> element to zero

I am currently working on a class called ClosedPlatform that has an attribute called Start, which is of type DateTime. public class ClosedPlatform { public DateTime Start; } My goal is to bind the Start attribute of a ClosedPlatform instance to a d ...

Illustration: Fixing a CSS Issue

After implementing Technique #8 from the Nine Techniques for CSS Image Replacement, I am not getting the desired results. Instead of correctly positioned images, the output is not what I anticipated. Here is a link to see for yourself: I made a modificati ...

Struggling to figure out the correct method for aligning calendar using bootstrap-datetimepicker?

Struggling with aligning the calendar correctly under a textbox while using bootstrap-datetimepicker in a form? The positioning seems off, and the calendar icon isn't where it should be. It's not behaving like a simple datetimepicker as shown in ...

Strange occurrences within the realm of javascript animations

The slider works smoothly up until slide 20 and then it suddenly starts cycling through all the slides again before landing on the correct one. Any insights into why this is happening would be greatly appreciated. This issue is occurring with the wp-coda- ...

What is the best way to align text alongside icons using ng-bootstrap in Angular 8?

I have a set of four icons positioned next to each other, but I want them to be evenly spaced apart. I tried using the justify-content-between class, but it didn't work. How can I achieve this? I'm creating a Progressive Web App (PWA) for mobile ...

Integrating Labels on External Websites with ASP.NET

I have been developing a website that needs to display a counter on the home page. To accomplish this, I used an asp label that counts and displays the database records (e.g. 180000) with no issues at all. However, now I am facing a new challenge. I want ...

Adjusting ToggleButton hues in react-bootstrap

I am working with a group of ToggleButtons in my app and I want to customize their background colors. Currently, all the buttons have a gradient defined by <.untoggled-button> class, with an added blue overlay for unselected buttons. However, I am fa ...

Page designed for displaying small star ratings in JSP

In the realm of my star.jsp page, the style.css is its trusty companion, faithfully executing its duties. However, a desire has crept into my heart - I yearn for the stars to shrink in size. The Chronicles of My Code star.jsp <!DOCTYPE html> ...