Behavior of attribute selector - html

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?

Answer 1

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;
}

Answer 2

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.

Answer 3

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.