css - 繰り返される疑似クラスセレクター

Question

Bootstrap CSS ファイルで気付きました:

 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}

:focus は、input、textarea、および select に対して 2 回指定されているようです。これは特定の機能を持っていますか？

Answer 1

これにより、css セレクターの特異性が高まります。

css仕様の関連する引用は次のとおりです。

注: 同じ単純なセレクターを繰り返し使用することは許可されており、特定性が向上します。

したがって、この特定のケースでは、input:focus:invalid:focusが よりも優先されinput:focus:invalidます。

以下は、繰り返し発生することで特異度が向上することを示す簡単な例です。css

CSS

span.color.color {
    color: green;
}

span.color {
    color: yellow;
}

html

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