CSS中具有特定属性的目标元素

Question

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 1

Just do [id^="tab_btn"] as a selector. It will target all IDs beginning with tab_btn

See the docs https://api.jquery.com/attribute-contains-selector/

Answer 2

Check this example:

Set a background color on all elements that have a class attribute value that begins with "test":

div[class^="test"] {
    background: #ffff00;
} 

Answer 3

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">