Using CSS to target specific attributes on standalone elements

Ever since I stumbled upon AMCSS, I have been utilizing standalone attribute selectors. Recently, I made the switch from Compass to cssnext, only to discover that syntax highlighting appears to be malfunctioning in Atom and other platforms where I tested it.

/* This will be properly highlighted */

h1[foo] { font-weight: bold; }

/* whereas this will not */

[foo] { font-weight: bold; }

It's strange because I couldn't locate any examples of standalone attribute selectors in the specifications, yet they function flawlessly. All the documented instances utilize combined selectors like h1[foo].

TL;DR

Are [foo] and *[foo] essentially the same and safe to use? Or is it merely a fortunate coincidence that it works?

Answer №1

Comparing the use of h1[foo] and [foo] is similar to comparing h1.bar with .bar.

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

The inline HTML script was unable to execute the function as intended by Jquery

Attempting to remove the element using a custom function called within inline html on my script tag, below is the code: HTML <div id="form"> <input type="text" name="name", id="name"><br> <input type="text" name="address", id="ad ...

Change the class upon clicking the element

Looking to create a function that toggles classes on elements when specific links are clicked. For example, clicking on link 1 should add the "active" class to the red element, while clicking on link 2 should do the same for the pink element, and so forth. ...

Disregard IDs when linting CSS in ATOM

Is there a way to configure csslint in Atom to exclude "ids" and prevent the warning "Don't use IDs in selectors" from appearing? Update: Despite my question being flagged as potentially duplicate, I delved deeper in my own research and ultimately fo ...

What are some techniques I can use to ensure my image grid is responsive in html/css?

If you want to check out the website, you can visit . The main goal is to create an image grid for a portfolio. It appears really nice on a 1080p screen, but anything below that seems messy and unorganized. Any assistance or suggestions on how to improve ...

javascript display hide choose among

I am attempting to display another set of options when the user selects a specific item. For example, if the user selects "Products," then a new selection box should appear with different product types. See my code below: <html> <head> <m ...

Converting Apache POI Word documents to clean HTML stripping out styles and superfluous tags

I am currently working on converting Word documents to clean HTML. I have been using Apache POI, but it seems to create messy output similar to MS Word's own HTML saving method. What I really need is a solution like the one offered by . For instance, ...

The dropdown menu is obscured by the toolbar

When using ionic4/angular, I want a dropdown menu to display upon clicking on the ion-avatar. However, the dropdown menu is hiding in the toolbar. I have tried setting z-index but it did not work. Any suggestions would be appreciated. You can find the sta ...

The issue arises from the fact that the Bootstrap modal fails to open automatically

Having trouble getting my bootstrap modal to open on page load, even though the button to trigger it is working fine. Here is my code: <div id="myModal" class="modal fade" role="dialog"> <div class=" ...

What is the best way to keep the menu bar in place as you scroll?

Can someone help me figure out how to keep the menu bar fixed at the top of the page when the user scrolls down? I've tried various methods but haven't had any luck. Any assistance would be greatly appreciated. Here is the CSS code: And here is ...

Unable to execute .py files in Atom after removing outdated Python installation

After successfully running python files through Atom's Open in Browser feature, I recently uninstalled python 2.7 (while still keeping the latest version). However, now I am encountering an error message stating that there is no program associated wit ...

Conceal an entire div using CSS, especially if a portion of it remains unoccupied

Is there a way to conceal an entire division if a part of it is void? For instance, if "dd" is empty as indicated below, can I hide the entire class "test" so that the keyword Restrictions does not display either? I attempted .test dd:empty { display: none ...

How to display an unordered list horizontally in HTML

I'm working on a screen that has filters displayed vertically, but I want to align them horizontally and have the filter options arranged in two columns. I've tried using CSS properties like spacing, clear, and display block, but the checkboxes/l ...

Encountering issues with integrating Sass into Angular 4

Hi there! I recently started a new project in Angular 4 and encountered some issues with the Sass styling. Every time I try to add sass and run the project, I keep getting this error message: body{ h1{ color : red; } } ^ Invalid ...

Scroll-triggered Autoplay for YouTube Videos using JQuery

Issue: I'm trying to implement a feature where a YouTube video starts playing automatically when the user scrolls to it, and stops when the user scrolls past it. Challenges Faced: I am new to JavaScript web development. Solution Attempted: I referre ...

Using Jquery and AJAX to insert a PHP file into a DIV container

I am facing a challenge where I need to dynamically load a PHP file into a DIV element upon clicking a button, all without the page having to reload. If you refer to the 'Jsfiddle' document linked below, you will find further details and explana ...

The ideal caret position while utilizing flexbox for centering within a contenteditable element

After testing on OSX Chrome 45, it appears that align-items: center; works for content alignment, but there is an issue with caret positioning in an empty editable field until text is typed. Is there a solution to this problem that doesn't involve ad ...

When it comes to using jQuery, I find that it only functions properly when I manually input the code into the Google Chrome console. Otherwise

Below is the HTML snippet: <textarea cols="5" disabled id="textareRSAKeypair"> @Model["keypair"] </textarea> <a href="#" class="btn btn-primary" id="downloadKeypair">Download Key</a> Here is the jQuery code: <script src="ht ...

Issue with Dismiss Button Display in Bootstrap Alert

I've been experimenting with Bootstrap and I realized that even though I followed all the instructions on their Alert page, my close button just appears as a large grey square with an X in it. Any suggestions on what might be missing? https://codepe ...

The website is failing to extend and reveal content that is being concealed by jQuery

I'm currently diving into the world of Javascript and jQuery, attempting to create a functionality where upon clicking the submit button, the website dynamically expands to display search information. Although the feature is still in progress, I am ut ...

What is the best way to use jQuery to set the height of one div equal to another div

Edited: I am facing a situation with a 3-column layout - Column A, Column B, Column C. The height of Column A is dynamic and I need to set the same height for both Column B and C. For instance, Column A contains a tabbed panel with varying heights based ...