CODEWITHSUNDEEP
htmlcss
John
John

Reputation: 1828

How to set styles for different id's and the same classes

If I have multiple IDs id1,id2,id3 sharing common CLASSes like.selectize-input and .select-dropdown.

Now I have to do

#id1 .selectize-input, #id2 .selectize-input, #id3 .selectize-input {};
#id1 .selectize-dropdown, #id2 .selectize-dropdown, #id3 .selectize-dropdown {};

Is there any easier way for setting styles like this?

Note: I do have other selectors to which I will apply different styles. So I do need this feature.

Upvotes: 1

Views: 111

Answers (3)

Boo89100
Boo89100

Reputation: 317

If you're applying the same thing to every ID I see no reason as to why you would need to indicate each ID, simply use the class to apply it. If you really want to do this you can use multiple selectors (though you'll need to do some testing to see what works for you).

I.E.

.selective-input#id1#id2#id3

Though this really just condenses your syntax, may make it more confusing if you're expecting others to read your code (note: proper syntax is always a good habit).

Upvotes: 1

Rik Lewis
Rik Lewis

Reputation: 749

You shouldn't include the id, just the class name, when defining the rule...

.selectize-input {};
.selectize-dropdown {};

If you've got a problem with specificity then this should be sorted out elsewhere in your stylesheet. It's generally a good idea never too use ids for styles.

Upvotes: 0

Banzay
Banzay

Reputation: 9470

I think it should look like:

[id^="id"].selectize-input {};
[id^="id"].selectize-dropdown {};

Upvotes: 3

Related Questions