CODEWITHSUNDEEP
jqueryhtmlcss
Shahil Mohammed
Shahil Mohammed

Reputation: 3868

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

Upvotes: 0

Views: 159

Answers (3)

junkfoodjunkie
junkfoodjunkie

Reputation: 3178

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/

Upvotes: 2

Sudharsan S
Sudharsan S

Reputation: 15393

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

Upvotes: 0

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

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;
}

Upvotes: 1

Related Questions