css attribute selectors combined as logical AND

Challenge: you need to match a css id that has a stable beginning and end but a middle that could change and you don't have control over it.

You could look at using ends with $ attribute selector or starts with ^ attribute selector. Not bad but not necessarily a strong match esp if ending is generic, like '-container'

The wildcard is not a good match (pardon the pun) because of how it works, any match in a string versus wildcarding one or more characters in middle

Solution: combine attribute selectors

When combined like so they function as an AND. Perfect!

Combine the starts with and ends with as in "starts with x AND ends with y"

e.g.

[id^='third-party-'][id$='-container']

this will target classes like so:  ' third-party-*-container'

love it

Good css tricks article