Shahil Shahil - 1 month ago 12
CSS Question

Target element with specific attribute in css

I want to target all the button which has a buttonid starts from tab_btn(number)

Is there a way to select element in css this way. I cannot make use of jquery as CSS is only the restriction.

<input id="FormControl_V1_I1_S1_I1_B1" scriptclass="Button" class="dh_LmyGLHecqegKZ42V_0 dj_LmyGLHecqegKZ42V_0" formid="FormControl" originalid="V1_I1_S1_I1_B1" tabindex="0" title="" buttonid="tab_btn1" value="General" type="button">

<input id="FormControl_V1_52_J1_I1_B1" scriptclass="Button" class="dh_LmyGLHecqegKZ42V_0 dj_LmyGLHecqegKZ42V_0" formid="FormControl" originalid="V1_I1_S1_I1_B1" tabindex="0" title="" buttonid="tab_btn2" value="General" type="button">


Class and other attribute wont be constant here, But the ID will have a series starting tab_btn1, tab_btn2 etc

Answer

Attribute selector in css. The [attribute^="value"] selector is used to select elements whose attribute value begins with a specified value.

input[buttonid^= "tab_btn"] {
  background: yellow;
}
<input id="FormControl_V1_I1_S1_I1_B1" scriptclass="Button" class="dh_LmyGLHecqegKZ42V_0 dj_LmyGLHecqegKZ42V_0" formid="FormControl" originalid="V1_I1_S1_I1_B1" tabindex="0" title="" buttonid="tab_btn1" value="General" type="button">

<input id="FormControl_V1_52_J1_I1_B1" scriptclass="Button" class="dh_LmyGLHecqegKZ42V_0 dj_LmyGLHecqegKZ42V_0" formid="FormControl" originalid="V1_I1_S1_I1_B1" tabindex="0" title="" buttonid="tab_btn2" value="General" type="button">

<input id="FormControl_V1_H2_M1_I1_B1" scriptclass="Button" class="dh_LmyGLHecqegKZ42V_0 dj_LmyGLHecqegKZ42V_0" formid="FormControl" originalid="V1_J1_T1_I1_B1" tabindex="0" title="" buttonid="tab2" value="General" type="button">