jQuery or CSS selector to select all IDs that start with some string

jquery css jquery-selectors css-selectors
matt picture matt · Feb 15, 2011 · Viewed 138.8k times · Source

How can I select all elements whose id starts with "player_"?

I have multiple elements like this:

<div id="player_290x3dfda">text</div>

Every id has a unique stamp on it. How can I select all those elements, either with jQuery or with pure CSS?

Answer

BoltClock picture BoltClock · Feb 15, 2011

Normally you would select IDs using the ID selector #, but for more complex matches you can use the attribute-starts-with selector (as a jQuery selector, or as a CSS3 selector):

div[id^="player_"]

If you are able to modify that HTML, however, you should add a class to your player divs then target that class. You'll lose the additional specificity offered by ID selectors anyway, as attribute selectors share the same specificity as class selectors. Plus, just using a class makes things much simpler.

Related questions

Is there a jQuery-like CSS/HTML selector that can be used in C#?

I'm wondering if there's a jQuery-like css selector that can be used in C#. Currently, I'm parsing some html strings using regex and thought it would be much nicer to have something like the css selector in jQuery to match …

Read More
Why is my jQuery :not() selector not working in CSS?

I have this layout: <div id="sectors"> <h1>Sectors</h1> <div id="s7-1103" class="alpha"></div> <div id="s8-1104" class="alpha"></div> <div …

Read More
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

Is there any way to select/manipulate CSS pseudo-elements such as ::before and ::after (and the old version with one semi-colon) using jQuery? For example, my stylesheet has the following rule: .span::after{ content:'foo' } How can I change 'foo' …

Read More