mathsbeauty mathsbeauty - 1 month ago 5x
CSS Question

How to get CSS to select ID of specific pattern?

The html page contains div ID s like q1r1, q1r2, q1r3,q2r1,q2r2,q2r3,.... How to select these ID in CSS to apply styles at once? If ID's were just q1,q2, q3.., it could be done as id^="q".


You can do [id^q]:

JS Fiddle

[id^=q] {
  // common styles

And if there is a certain id you would like to omit you can use [id^=q]:not(#idname):

JS Fiddle

OR if you want to exclude ids that start with a certain pattern, combined the two like:

JS Fiddle

/* All ids that start with "q" but not "qr" */
[id^=q]:not([id^=qr]) { 
  // Styles here

BUT I would absolutely recommend adding a common class since that is for what they are designed. If an id can be added via python, I would think a class could be added as well.