Target element with specific attribute in 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

Why you tagged jQuery ?

Mamdouh Saeed
– Mamdouh Saeed

2016-11-09 06:49:45 +00:00
Commented Nov 9, 2016 at 6:49 — Mamdouh Saeed
– Mamdouh Saeed, Commented Nov 9, 2016 at 6:49
Jquery users might have an answer to this.

Shahil Mohammed
– Shahil Mohammed

2016-11-09 07:02:47 +00:00
Commented Nov 9, 2016 at 7:02 — Shahil Mohammed
– Shahil Mohammed, Commented Nov 9, 2016 at 7:02

Khorshed Alam · Accepted Answer · 2016-11-09 08:40:11Z

2

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/

edited Nov 9, 2016 at 8:40

Khorshed Alam

2,70624 silver badges32 bronze badges

answered Nov 9, 2016 at 6:38

junkfoodjunkie

3,1861 gold badge22 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mohammad Usman Over a year ago

[id^=tab_btn] should be [id^="tab_btn"].

junkfoodjunkie Over a year ago

There is no need to use the quotes

Kyle Roux Over a year ago

If it were being used as a selector from JavaScript the quotes would be nessecery, but yea css has no such requirement

junkfoodjunkie Over a year ago

It isn't needed in javascript either, at least not jQuery

Samir · Accepted Answer · 2016-11-09 06:39:54Z

1

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

edited Nov 9, 2016 at 6:39

Samir

1,3681 gold badge10 silver badges16 bronze badges

answered Nov 9, 2016 at 6:38

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

Comments

Sudharsan S · Accepted Answer · 2016-11-09 06:50:19Z

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

Collectives™ on Stack Overflow

Target element with specific attribute in css

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related