Matching CSS patterns for customised formatting

Question

I am using a Chrome browser extension called Stylebot to apply custom CSS formatting to particular elements on a webpage - the purpose of this is to selectively obscure sensitive information before creating a screencast.

The problem is that on different pages, the same element has a slightly different identifier (just a different number at the end), and rather than having to manually customise each page, I want to be able to apply the CSS to anything that patches a particular pattern.

Examples of some of the ones I've done manually:

#ext-gen115 em {
    color: transparent;
    text-shadow: 0 0 20px black;
}

#ext-gen26 em {
    color: transparent;
    text-shadow: 0 0 20px black;
}

#ext-gen498 em {
    color: transparent;
    text-shadow: 0 0 20px black;
}

#ext-gen52 em {
    color: transparent;
    text-shadow: 0 0 20px black;
}

As you can see, they all have the same form, but have a different number at the end (that can have a different digit count).

Can I match these with a pattern?

Thanks

score 1 · Answer 1 · answered Jul 26 '18 at 00:21

not sure if you still need, this, but for anyone looking, try using the attribute selector:

[id^="ext-gen"] em {
    color: transparent;
    text-shadow: 0 0 20px black;
}

Using the caret before the equals will ensure that this selector will match any id that starts with "ext-gen". In your case, you could also use do this:

[id*="ext-gen"] em {
    color: transparent;
    text-shadow: 0 0 20px black;
}

The asterisk would cause this selector to match any id that contains the string "ext-gen". Best to be specific though, so in your case, I'd stick with the caret.

Finally, a reminder that you can list selectors (separated by commas) to clean up your code:

[id^="ext-gen"] em,
.another-class em {
    color: transparent;
    text-shadow: 0 0 20px black;
}

The rules in the curly brackets will apply to any of the matched selectors.

Matching CSS patterns for customised formatting

1 Answers1