CSS Selector for a partial CustomElement nodename

Question

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

Answer 1

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