Shortening html IDs to use in CSS

Question

Is there any way to shorten a HTML element tag like this:

<input id=ctl00_ctl32_g_9bd32d9e_a30e_48f8_af0e_4c4b7e8ba1f5_createSuggestion>

In CSS so that I don't have to reference the entire thing and just use the createSuggestion part of it like this:

input createSuggestion{
margin-left:10%;
}

For instance, when producing a SQL query, sometimes a 'like %createSuggestion' would be used. Any ideas?

possible duplicate of [CSS select elements with partial id](http://stackoverflow.com/questions/13533484/css-select-elements-with-partial-id) — esqew, Oct 21 '14 at 16:16
Why not actually apply the appropriate class to the input element, assuming you have control of the markup. — mccainz, Oct 21 '14 at 17:03

score 7 · Accepted Answer · answered Oct 21 '14 at 16:16

7

You could achieve that by attribute selector as follows:

input[id$="createSuggestion"] {
    margin-left: 10%;
}

6.3.2. Substring matching attribute selectors

[att$=val] Represents an element with the att attribute whose value ends with the suffix "val". If "val" is the empty string then the selector does not represent anything.

answered Oct 21 '14 at 16:16

Hashem Qolami

97,268
26
150
164

when using a div tag what does the coding become? eg. div id=..pComment have tried using div[id$..] and #pComment – matt Oct 22 '14 at 14:06
@matt `div[id$="pComment"]` - **[Example](http://jsbin.com/puququ/1/edit?html,css,output)**. – Hashem Qolami Oct 22 '14 at 17:41

score 2 · Answer 2 · answered Oct 21 '14 at 16:18

2

Add ClientIdMode="Static" in your server-side control to prevent that entirely.

answered Oct 21 '14 at 16:18

SLaks

868,454
176
1,908
1,964

Shortening html IDs to use in CSS

2 Answers2