Update: Went for a different solution:

<img is=queen-of-hearts>

Live at: https://card-ts.github.io/playingcardts

this question is about working around CSS Selector limitations

So my Custom Elements now make true symantic HTML:

Displaying:

no external SVG files,
all 500KB SVG is (manually) slimmed and LZMA packed to 70KB into ONE Custom Element
all 52 cards (Custom Elements) are then created with Supersharps class factory code

Next problem arises... What selectors to use?

I can do:

    Queen-of-Hearts {
      transform: rotate(20deg)
    }

But to highlight every King following a Queen (only one above) the CSS gets verbose:

        Queen-of-Spades+King-of-Spades,
        Queen-of-Hearts+King-of-Hearts,
        Queen-of-Diamonds+King-of-Diamonds,
        Queen-of-Clubs+King-of-Clubs,

        Queen-of-Hearts+King-of-Spades,
        Queen-of-Hearts+King-of-Hearts,
        Queen-of-Hearts+King-of-Diamonds,
        Queen-of-Hearts+King-of-Clubs,

        Queen-of-Diamonds+King-of-Spades,
        Queen-of-Diamonds+King-of-Hearts,
        Queen-of-Diamonds+King-of-Diamonds,
        Queen-of-Diamonds+King-of-Clubs,

        Queen-of-Clubs+King-of-Spades,
        Queen-of-Clubs+King-of-Hearts,
        Queen-of-Clubs+King-of-Diamonds,
        Queen-of-Clubs+King-of-Clubs {
            transform: scale(1.2);
            border: 1px solid green;
        }

I would like to write CSS like:

    Queen* + King* {
            transform: scale(1.2);
            border: 1px solid green;
    }

Plenty of jQuery answers for 'partial selectors' around which just do a brute force search with JS
I have searched CSS4 Selectors, nothing that catches my eye
I can (kinda brute force also) create all CSS rules with JS
Is the only alternative to ignore the nodename and add (data)attributes or classnames?

Note: I have a version which does <Queen-of-Hearts rank="Queen" suit="Hearts" />
But it is not as semantically 'pleasant'

Interested in any pointers for an elegant solution to capture Solitaire or Poker rules in CSS,
no browser limitations,
this is a 'having fun exploring browser capabilities' project...
once cleaned will be on GitHub

Update

Went with the notation we overlooked: extending a Built-In element:

<img is=queen-of-hearts>

Its auto closing
is a single DOM element
can be accessed with CSS selectors img[is*=queen]
only restriction is= must be lowercase...

maybe even better than the notation of the Autonomous Custom Element I started with:

<card-t cid=Queen-of-Hearts></card-t>

Both (I must say 53 Elements) are included in the single 16 KB file:

https://card-ts.github.io/playingcardts

If you finally decide to use a unique custom element name as suggested by Connexo, maybe it would useful to keep named attributes to deifne the rank and suit.

<playing-card rank="Queen" suit="Hearts">

You could then define properties that will reflect both-ways the attributes values.

card.rank === card.getAttribute( 'rank' )

This way it would be easier to find the value of a card than if you use attributes as values.

Consider this notation:

<playing-card queen hearts></playing-card>

Problem: what is its value?

let card = game.querySelector( 'playing-card' )    
if ( card.getAttribute( 'spades ') )
     suit = spades
else if ( card.getAttributes( 'diamonds' ) )
     ...

Alternately, you could use a single name attribute:

html

<playing-card name="10-of-spades">

javascript

//easy manipulation
let card = document.querySelector( 'playing-card' ) 
let [rank, suit] = card.name.split( '-of-' )

css

//easy selection (...for advanced CSS users)
[name|=king] + [name|=queen]  //Queens after a King
[name|=1]                     //Aces
[name$=spades]                //Spades