Behavior of attribute selector

Question

I'm trying to understand how wildcard selector in CSS does work? Consider the following HTML markup:

<div id="child"> </div>

And corresponding CSS:

div[id="child"] {border-color: green; } #child{ border: 20px solid; background: aqua; height: 50px; margin: 10px; }

I think, that style of div.child will be:

 border: 20px solid; background: aqua; height: 50px; margin: 10px; border-color:green;

I.e. border-color:green just add to a stylesheet of div.child. But if we write

div[id="child"] {border-color: green!important; } #child{ border: 20px solid; background: aqua; height: 50px; margin: 10px; }

It works like

#child{ border-color: green; border: 20px solid; background: aqua; height: 50px; margin: 10px; }

Question: Why we must using div[id="child"] {border-color: green!important; } rather than div[id="child"] { border-color: green } for applying green color for border?

What you have is an attribute selector not the wildcard selector (which is *). — Felix Kling
– Felix Kling, Commented Dec 22, 2013 at 18:50

Community · Accepted Answer · 2020-06-20 09:12:55Z

It's an issue of specificity. Example demonstrating this.

Refer to the following documentation:

6.4.3 Calculating a selector's specificity

count the number of ID attributes in the selector (= b)

count the number of other attributes and pseudo-classes in the selector (= c)

count the number of element names and pseudo-elements in the selector (= d)

Therefore #child has a specificity of 100. And div[id="child"] would have a specificity of 11.

Usage of !important would effectively override the border applied by #child.

Alternatively, you could use the following, and avoid using !important.

jsFiddle example

div#child[id="child"] { border-color: green; }

Community · Accepted Answer · 2020-06-20 09:12:55Z

This doesn't explain the difference between using !important and not using it, but rather how to apply the green border without using two rules.

If you look at the documentation for border:, you will find this:

Formal syntax: <br-width> || <br-style> || <color>

<color>:
A <color> denoting the color of the border. If not set, its default value is the value of the element's color property (the text color, not the background color). See border-color.

The default color is #000 (black).

So, by writing

border: 20px solid;

you are basically specifying:

border-width: 20px border-style: solid; border-color: #000;

And if you put border-color: green before that rule, it will be overwritten. So you could either write:

border: 20px solid; border-color: green;

or

border: 20px solid green;

Using two rules just to apply the border color is unnecessary.

1+ I didn't even consider this. I read the question in a completely different way. ;)
Well, tbh I'm not sure what the OP is asking for ;) But I can see how it is confusing that the border-color property is "ignored" when it looks like that no other color is (explicitly) set.

Mister Epic · Accepted Answer · 2013-12-22 18:54:37Z

It has to do with the specificity of your selector. When there is a conflict between multiple selectors which are trying to apply mutually exclusice styles, specificity is the measure that determines which styles win out.

So your first selector div[id="child"] is an attribute/class selector, which has lower specificity than the Id selector from your second block: #child

When you apply !important to a style, it is applied irrespective of specificity. It should also be used sparingly for that reason.

Collectives™ on Stack Overflow

Behavior of attribute selector

3 Answers 3

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Related