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".
Asked
Active
Viewed 945 times
1
-
2Why can't you apply a common class name to each? – Derek Story Sep 12 '16 at 18:30
-
`[id^="q"]` _does_ select all of those, or am I not understanding what you're wanting? – Matthew Johnson Sep 12 '16 at 18:31
-
The html is auto generated through some complicated python script. – mathsbeauty Sep 12 '16 at 18:32
-
[id^="q"] will also select ids with "qrst" which are not to be selected. – mathsbeauty Sep 12 '16 at 18:34
-
You'll need to comma separate then: `[id^="q1"], [id^="q2"]`. If all the "q#" tags have a containing element, you could use that as well: `.container [id^="q"]`. – Matthew Johnson Sep 12 '16 at 18:36
-
There are tens of such ids. – mathsbeauty Sep 12 '16 at 18:38
2 Answers
1
You can do [id^q]:
[id^=q] {
// common styles
}
And if there is a certain id you would like to omit you can use [id^=q]:not(#idname):
OR if you want to exclude ids that start with a certain pattern, combined the two like:
/* 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.
Derek Story
- 9,518
- 1
- 24
- 34
1
By using '^' selector the styles can be applied
<!DOCTYPE html>
<html>
<head>
<style>
div[id^="q"] {
background: #ffff00;
}
</style>
</head>
<body>
<div id="q1r1">The first div element.</div>
<div id="q1r2">The second div element.</div>
<div id="q2r2">The third div element.</div>
<p id="q2r1">This is some text in a paragraph.</p>
</body>
</html>
Bhuvaneswari
- 46
- 4