How can css for id same format

Question

I using JQGrid and SubGrid, Jqgrid automatic generic Id for SubGrid like this gbox_Grid_Grid_1_t, gbox_Grid_Grid_2_t, gbox_Grid_Grid_1_t_1_t.... :

   <div id="gbox_Grid_Grid_1_t"> normal</div>
   <div id="gbox_Grid_Grid_2_t"> normal</div>
   <div id="gbox_Grid_Grid_1_t_1_t"> red</div>
   <div id="gbox_Grid_Grid_2_t_1_t"> red</div>
   <div id="gbox_Grid_Grid_1_t_1_t_1"> blue</div>
   <div id="gbox_Grid_Grid_1_t_1_t_2"> blue</div>

The 'normal' i want it print color white

The 'red' print color red

The 'blue' print color blue

How can i do it with css?

@Swellar No, there is no class here, i work with JQgrid, and sub grid, Jqgrid automatic set id for SubGrid and I need the color of Subgrid difference vs parent grid. — Hong Van Vit, Feb 01 '18 at 07:17

Roberto Zvjerković · Answer 1 · 2018-02-01T07:17:04.563

7

Why don't you use CSS classes?

Markup:

<div id="xyz_1" class="normal">normal</div>

Styles:

.normal { 
    color: red
}

If you really do need to target the elements with IDs you will have to target them individually somehow, but I will need more code / explanation as to why would you even need to do that.

edited Feb 01 '18 at 07:17

answered Feb 01 '18 at 07:13

Roberto Zvjerković

9,657
4
26
47

finally an answer with some text instead of a code dump... – Brian H. Feb 01 '18 at 07:15
that was quick :) – Rahele Dadmand Feb 01 '18 at 07:17
I work with JQgrid, and sub grid, Jqgrid automatic set id for SubGrid. And i need sub grid color difference vs parent Grid – Hong Van Vit Feb 01 '18 at 07:19
I'm sure there's a way of adding classes in JQgrid. This might help: https://stackoverflow.com/questions/12180718/adding-a-css-class-to-a-column – Roberto Zvjerković Feb 01 '18 at 07:20
Otherwise, you could use jQuery to target elements with regex expressions. – Roberto Zvjerković Feb 01 '18 at 07:23

VilleKoo · Accepted Answer · 2018-02-01T11:06:17.943

Just to point out that you can do this with just id's by utilizing attribute selectors.

But as others have said, you should really use classes instead

body { background: #333 }

/* ID starts with xyz */
[id^=xyz] {
  color: white
}

/* ID ends with _t */
[id$=_t] {
  color: red
}

/* ID contains _t_ */
[id*=_t_] {
  color: blue
}

   <div id="xyz_1"> normal</div>
   <div id="xyz_2"> normal</div>
   <div id="xyz_3"> normal</div>
   <div id="xyz_1_t"> red</div>
   <div id="xyz_2_t"> red</div>
   <div id="xyz_3_t"> red</div>
   <div id="xyz_1_t_1"> blue</div>
   <div id="xyz_1_t_2"> blue</div>
   <div id="xyz_1_t_3"> blue</div>

How can css for id same format

2 Answers2