What makes the element[class=noquotes] function so effective?

According to the MDN attribute selector in CSS, it has the following syntax:

div[attr="actualValue"]

For example:

<div class="test"></div>

div[class="test"]

However, I have observed that the quotes around the test are not necessary as shown here:

div[class=test]

For instance:

div[class=test] {
  background: #6ea7b2;
}
<div class="test">I am a div</div>

Why is this so? Does the W3C specification allow attribute selection without quotes around the value?

Answer №1

According to the guidelines:

According to CSS standards, attribute values should either be identifiers or strings.

"example" is considered a string and is acceptable.

example is seen as an identifier and also meets the requirements.

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

Tips for ensuring that the headers remain fixed in both the horizontal and vertical directions while allowing the data

I have been trying to create a table with a fixed header (meaning the header must be visible both vertically and horizontally). The table should be scrollable It should have a horizontal header The vertical header should match the horizontal header When ...

Siblings selectors within Internet Explorer slow down significantly when using the :hover pseudo-class

Sample page: http://jsfiddle.net/y2pwqch6/6/ This particular example showcases a CSS selector known as the adjacent sibling selector: .l:hover + .r { color: blue } The issue arises when hovering over any element on the page, causing Internet Explore ...

Adjust the parent container to perfectly accommodate the child element

Is there a way to resize the container box to fit its dynamic content without using JavaScript? Here is the sample code for the problem: <div id="container"> <div id="content"></div> </div> #container { position: relativ ...

Prevent HTML Characters from Rendering in Preformatted Text Tag

After setting up a syntax highlighter, I found out that for it to function properly, the tags need to be indicated as &lt; and &gt;. My task now is to switch all <'s with &lt; and >'s with &gt;, but only within the PRE tag. ...

The React sidebar expanded to cover the entire screen width

As I work on creating a dashboard page that will display a sidebar after the user logs in, I am facing an issue where the sidebar is taking up the full width of the page, causing my Dashboard component to drop to the bottom. You can view the image link of ...

A unique Javascript feature that switches the text on various buttons

As someone who is relatively new to Javascript and web development, I am currently working on a project that involves creating multiple text areas for users to input and save text. Each text area is accompanied by a button with a unique ID that functions a ...

What is the best way to generate a variable amount of div elements with constantly changing content using Angular2?

I'm not entirely sure on the process, but I believe ngFor would be used in this scenario. Essentially, my goal is to generate the following div multiple times, with each iteration updating the value inside the brackets from 0 to 1, 2, and so forth... ...

Inquiries about the jQuery Button Timer

Currently experimenting with jQuery to create a timer. Everything seems to be in place and the Stop Timer button is functioning properly. However, I'm facing issues with the Start Timer and Reset Timer buttons as they are not working as expected. Seek ...

Hover over the Div element for inline effect

Hello all, I am currently working on running a while loop from a database to show different records. The twist is that these records are displayed as images, which makes it tricky to customize using standard CSS. To work around this, I'm implementing ...

What are the steps to create a dynamic navigation bar in React without encountering hydration issues?

My goal is to dynamically show or hide links based on user authorization. Here's my initial approach: const Navbar = () => { const { canDo, ...} = useUser(); //A Zustand store return ( <> <div> <ul> ...

Is the CSS after-before property not functioning properly?

In my CSS code, I am utilizing the after and before tags. This is the structure of my div. However, I am facing an issue where my after tag is not functioning as expected. While everything else seems to be working fine, the after and before tags are not di ...

Styles and CSS have been successfully loaded, however, the content is not appearing

After attempting to import a web HTML CSS template into my self-made MVC, I encountered an issue. While the template works properly on its own, it fails to connect to the CSS files and display proper styles when accessed through my controller. Instead, onl ...

"Implement a smooth transition effect lasting 1000 milliseconds when a class is added via

I'm attempting to use the fadeIn 1000 effect when a class is added through a Click function. I have already attempted this: http://jsfiddle.net/rf7mudL5/ HTML <span class="date-outer">Text will Red on fadeIn</span> <button class="mo ...

What is the best way to implement multiple ternary operators within HTML code?

Consider the following code snippet: It currently applies CSS classes up to red4, but I want to apply CSS classes up to red11. Additionally, the variable "size" in myData should be dynamic. For example, size could range from 0-20 // 0-100 // 0-10000, etc., ...

Increase the dropdown size without altering the dimensions of the container

I have a dropdown menu enclosed in a div with a vibrant yellow background. Take a look at the code on Plunker here. Upon clicking the dropdown button, the list expands and the container's height increases as well. The background color of the dropdown ...

What could be causing the overflow of content from my div element?

Let's discuss the problem at hand: I have an HTML code snippet: <div id="container"> <div id="fixedImg"></div> <div id="content" class="clearfix"> asdf <br /> asdf <br /> df<br />asdf & ...

Is it better to use enum rather than ul for inline lists within paragraphs in HTML5?

Reflecting on the passage below: So in the initial group, we merge these 3 codes: - AA - BB - CC with the following codes: - Aa - Ab - Ac to achieve the desired outcome. Is this paragraph semantically incorrect? If not, how should it be written in H ...

A pair of div elements within one section

Can you explain why the following HTML code uses two divs, one with a class and the other with an ID, instead of just using one of them to assign properties? .header { background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/ ...

Implementing AngularJS drag and drop functionality in a custom directive

I am in search of an example that demonstrates similar functionality to the HTML5 File API using Angular-js. While researching directives for Angular 1.0.4, I found outdated examples that heavily rely on DOM manipulation. Here is a snippet of the pure Ja ...

Keywords: <footer>, <aside> not encompassing all aspects of the HTML on the content page

Recently, I have been transitioning my codebase from .NET webform to .NET Core: In the _Layout.cshtml, elements like <hr> and <section> span the entire width (e.g. 100%) of the html page as expected. However, when I insert similar tags in the ...