css :first-letter overrides ::selection

When using the :first-letter pseudo class + ::selection pseudo class, the :first-letter overrides the custom selection color. (seems not to be a specificity issue as changing the order maintains this behavior)

CodePen example

.test::selection {
  background-color: green;
  color: white;
}

.test:first-letter {
  text-transform: uppercase;
}

<div class='test'>this is a test</div>

RESULT