::selection pseudo element specificity

Generic rule `::selection` can not be overridden by the more specific rule `p.warning::selection`

by Konstantin Rouda

HTML

<!-- 
Example from:
https://drafts.csswg.org/css-pseudo-4/#highlight-cascade
-->
<p class="warning">Some <strong>very important information</strong></p>

CSS

/*
This rule is the same as:
*::selection { background: blue;} --> strong::selection { background: blue;}
*/
/*::selection {
  background: blue;
}*/


/*
Why this (more specific rule),
can not overrride the rule above?
*/
strong {
  color: pink;
}


p.warning {
  color: blue;
}




/*
if we set this set of rules then background will be red, as expected.
Because `p.warning` has higher specificity
*/
/*
strong.bbb          { background: blue; }
p.warning { background:  red; }
*/