Search code examples
csstwitter-bootstrappseudo-class

Repeated Pseudo-Class Selectors

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?

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>