I am using this as an opportunity to learn, so I appreciate if you can refrain from telling me what not to do and instead help me understand the concepts. What I am trying to achieve here is comprehension.
Here is a sample of CSS code:
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
input[type="checkbox"]:focus {
outline: none;
}
Both styles have the same specificity values of 0,2,1. From what I've studied about CSS, the second style should take precedence since it appears last. When I make the second style more specific, it works as intended. However, Chrome does not display the outline, while IE11 and FF28 do. This seems like a basic CSS concept to me. Can anyone shed light on the underlying issue so I can incorporate it into my stylesheet development process?
UPDATE: Even when I remove the second style, Chrome still doesn't show the outline. It seems that in Chrome, the first outline declaration is being overridden by the subsequent line. So, could it be that Chrome follows the specification strictly while FF and IE do things differently? Is there a distinction between union and override interpretations of CSS among different browsers?