Repeated Pseudo-Class Selectors

css, pseudo-class, twitter-bootstrap

Solution

This increases the css selector's specificity.

Here is the relevant quote in the `css` specs:

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

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

Here is a simpler example demonstrating the increase in `css` specificity with repeated occurences:

css

span.color.color {
    color: green;
}

span.color {
    color: yellow;
}

html

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

Problem

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 appears that :focus is specified twice for input, textarea, and select; does this have a particular function?

Original source