Employing a pair of attribute selectors [class][class] to target specific elements

Yesterday, I came across a peculiar rule in one of our company's CSS files:

.classname1[class][class] { 
   margin:0 !important; 
}

My understanding of this rule is that it seems like someone wanted to ensure that this style would be applied even if another class with the '!important' property was added. However, I believe just one [class] attribute would have been sufficient, like this:

.classname1[class] {
   margin:0 !important;
}
.classname2 {
   margin:5px !important;
}
<div class="classname1 classname2">
   ...
</div>

So, my question is, why include the second [class] attribute in the rule?

Answer â„–1

[class][class] is a selector that targets any element with at least one class attribute. The main distinction between [class][class] and [class] lies in specificity, as each attribute selector adds to the overall specificity of the selector:

Note: Repeated instances of the same simple selector are permitted and increase specificity.

To illustrate specificity, let's examine the specificities of three example selectors:

/* 1 class, 2 attributes -> specificity = (0,3,0) */
.classname1[class][class]

/* 1 class, 1 attribute  -> specificity = (0,2,0) */
.classname1[class]

/* 1 class               -> specificity = (0,1,0) */
.classname2

An !important declaration under a less specific selector will take precedence over a non-important declaration under this selector. Likewise, an !important declaration within this selector will override any !important declarations in less specific or equally specific selectors higher up in the source order.

If the goal was simply to target .classname2, using multiple attribute selectors on top of a class selector might seem excessive. However, it's possible the author intended to override another selector. Ultimately, only they would truly know the reasoning behind their choice.


The reason [class][class] works is because it doesn't mandate the presence of two class attributes. In a compound selector, all simple selectors are treated independently, including attribute selectors, regardless of their names or values. Selectors do not assume or dictate whether an element can have multiple class attributes—instead, an attribute presence selector matches based on the existence of at least one.

While the spec does mention the theoretical possibility of an element having multiple class attributes, this isn't currently feasible in modern HTML. On the contrary, it explicitly states that elements can have multiple ID attributes, which must all be considered when matching ID selectors. Although there isn't explicit guidance for value-matching with attribute selectors, it's reasonable to assume similar principles would apply given how multiple IDs function in HTML.

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 there a way to lower just one border?

I need assistance with moving the .container div downward on my webpage. I attempted using (margin-top: 30px) and it worked, but unfortunately, it also shifted down the border of the (.container) along with the outline of .all. My goal is to have only the ...

Top solution for preventing text selection and image downloading exclusively on mobile devices

My plan is to use the following code to accomplish a specific goal: -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-tap-highlight-color:rgba(0,0,0,0); I& ...

CSS nth-child doesn't target specific element

It appears that the css nth-child selector did not hit its mark. Any ideas on why? Check out the jsFiddle source Here is the HTML structure: <a href="#">red</a> <br /> <a href="#">none</a> <br /> <a href="#">gra ...

"Optimizing the placement of a range slider for pricing options

As a beginner in HTML, CSS and JS, I recently faced the challenge of creating a price slider range on a website. However, I am struggling with repositioning it. After copying the code from this link, I noticed that the slider is positioned at the top of th ...

Ways to extract information from a span element

I'm completely new to web scraping and I have encountered an issue where I need to extract data from span elements that do not have any specific classes assigned to them. Here's an example of how they appear: "<span content=\"3 ...

Material-UI is having trouble resolving the module '@material-ui/core/styles/createMuiTheme'

Although I have searched for similar issues on StackOverflow, none of the solutions seem to work for me. The errors I am encountering are unique and so are the fixes required, hence I decided to create a new post. The company conducting my test provided m ...

Unable to auto-resize content and wrapper div in CSS3

HTML <div id="nav"> <div id="nav_wrapper"> <ul> <li><a href="index.html">Home</a></li><li> <a href="#">Licensing</a></li><li> ...

Placing an image above text in a table cell and making it hover

Is there a way to display an icon on the right-hand side of a table cell using jQuery? I want it to overlap the td contents if necessary. I've searched for solutions online but haven't found anything helpful yet. My main concern is styling rathe ...

Form fields in Bootstrap 4 will consistently expand downward in the select dropdown menu

When using bootstrap 4, I want my field to always expand downwards and never upwards, even when half the screen is taken up by the form's select element. How can I achieve this effect? I have tried using data-dropup-auto="false" but it didn't wo ...

Adjusting element position while scrolling

Objective The goal is to have the page navigation display lower on the page by default. This will provide a cleaner layout as shown in the image below. Context An interactive element for navigation was implemented utilizing Headroom.js. This library d ...

Modify the button's border color upon click action

I am looking to implement a feature where the border of a button changes when clicked once and reverts back when clicked again. This should apply individually to each of the 16 buttons with the same class. Additionally, I want to enable the ability to clic ...

The equal height feature in Bootstrap 4's card-deck is not functioning as expected

I am having an issue with the card-deck property where it is not being applied correctly. The .card-deck class should create a grid of cards that are equal in height and width, and the layout should adjust automatically as more cards are added. Here is th ...

What is the reasoning behind Bootstrap implementing a 0.02px variance between screen size breakpoints in its media queries?

// Tailored for extra small devices like portrait phones below 576px in width @media (max-width: 575.98px) { ... } // Designed for small devices such as landscape phones from 576px and above @media (min-width: 576px) and (max-width: 767.98px) { ... } // ...

Looking to rearrange the layout of jqgrid

I need to reposition the jqgrid away from its default top left position. I have attempted some adjustments but they are not working as expected. Below is the code snippet for your review and suggestions: Here is the HTML code snippet: <div> &l ...

Issue with Bootsrap 4 Dropdown Menu Displaying Incomplete Links

There seems to be an issue with the Bootstrap 4 dropdown menu not displaying all the links. Please refer to the image below: https://i.sstatic.net/ZS2t2.png The dropdown menu is not showing beyond the red band. I can't seem to figure out what I&apos ...

Is there a way to center text that is aligned to the left within a div?

Is there a way to center text that is left aligned? I'm struggling to achieve the following effect: This text is left aligned. This text is left al ...

The margin-bottom attribute does not display any vacant area

I recently attempted to center the inner box within the outer box in this codepen. To achieve this, I utilized a workaround by applying margin-bottom: 20px;. However, it appears that this approach did not generate any visible space between the bottom line ...

Moving elements using CSS

Hi, I've been facing this issue with my web development since the start. Whenever I zoom in, the container also moves along. Is there any way to fix this problem? .darkslidecont{ width: 200px; height: 50px; position: relative; bac ...

Unlocking the potential of the flex box item to effortlessly utilize the entire width of its parent

.container { width: 400px; border: 2px solid red; display: flex; flex-flow: row wrap; } .item { padding: 20px; border: 1px solid blue; width: 70px; } <div class="container"> <div class=item>Box 1</div> <div class=ite ...

The CSS file is not displaying the background image on the PHP file

I am facing an issue with using CSS to include a background image for the layer, but it doesn't seem to be working correctly... The CSS code snippet is as follows: header { background-image: url("boisko.jpg"); background-repeat: no-repeat; background ...