Pseudo-class repeated selectors

Question

I noticed in the Bootstrap CSS file:

input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus { border-color: #e9322d; -webkit-box-shadow: 0 0 6px #f8b9b7; -moz-box-shadow: 0 0 6px #f8b9b7; box-shadow: 0 0 6px #f8b9b7; s} 

It looks like: focus is set twice for input, textarea and select; Does it have a specific function?

Answer 1

This increases the css specificity selector.

Here is the relevant quote in the css specs:

Note. Repeated occurrences of the same simple selector are allowed and increase specificity.

So, in this particular case, input:focus:invalid:focus will take precedence over input:focus:invalid .

Here is a simpler example demonstrating an increase in css specificity on repeated occurrences:

CSS

 span.color.color { color: green; } span.color { color: yellow; } 

HTML

 <span class="color">This will be green.</span>