CODEWITHSUNDEEP
jquerycss
nasty
nasty

Reputation: 7077

Select multiple div IDs using a single css selector

I have few dives that are identical but they have different div IDs. Is there any way to apply a CSS style to all the div IDs using some sort of a selector, that is cross browser compatible? My HTML looks like this

<div id="field_0_dd"></div>
<div id="field_1_dd"></div>
<div id="field_2_dd"></div>
<div id="field_3_dd"></div>
<div id="field_4_dd"></div>
<div id="field_5_dd"></div>

Thanks heaps :)

Upvotes: 0

Views: 1176

Answers (7)

Scott Hillson
Scott Hillson

Reputation: 853

Just give them all the same class!

<div class="common-class" id="field_0_dd"></div>
<div class="common-class" id="field_1_dd"></div>
<div class="common-class" id="field_2_dd"></div>
<div class="common-class" id="field_3_dd"></div>
<div class="common-class" id="field_4_dd"></div>
<div class="common-class" id="field_5_dd"></div>


.common-class{background:green;margin:auto;etc}

Upvotes: 2

Blender
Blender

Reputation: 298076

You can use attribute selectors (^= is the starts with selector and $= is the ends with selector):

$('div[id^="field_"][id$="_dd"]')

Although having this many unique IDs is pretty hard to manage. Give them a class as well.

Upvotes: 3

Christian Mann
Christian Mann

Reputation: 8125

If you're looking for a CSS selector to match a regular expression, then I don't think you can get it in a cross-browser compatible way (though CSS2 Attribute Selectors with Regex allows you to select, e.g. everything beginning with field_. Not supported by IE<=6, but there you go).

However, jQuery has the filter function, which can be used to accomplish this easily:

$('div')
    .filter(function() {
        return this.id.match(/field_\d+dd/);
    })
    .html("Matched!")
;

Upvotes: 3

coolguy
coolguy

Reputation: 7954

$('div[id^="field"]').addClass('styleyouwant');

And in your css

.styleyouwant{

/**styles here**/
}

Upvotes: 1

Robin Rieger
Robin Rieger

Reputation: 1194

add a class and then select that.

e.g. class = "dummy"

and in the jquery

$('.dummy') ... whatever you want, e.g. $('.dummy').css('color','red')

Upvotes: 1

Ohgodwhy
Ohgodwhy

Reputation: 50767

The starts with selector. 

$('div[id^=field_]')

Upvotes: 1

Tats_innit
Tats_innit

Reputation: 34107

Could do

or few other down below.

Hope it fits the cause :)

code

$(document).ready(function() {
   $('div').css('color','green');

});

Upvotes: 1

Related Questions