Applying gloabal css rules regardles of class/ id suffix

Question

Not sure if this is possible or if I'm just not asking the right questions, but I'm looking to apply a global rule for a set of classes that have different suffixes.

ie.

.gallery {} would like these rules to apply also to .gallery-1, .gallery-2, gallery-3 {} etc... Without having to add those actual specific classes to my stylesheet each time a new gallery is made.

Does anyone know if this is possible?

with thanks.

score 1 · Answer 1 · answered Mar 21 '14 at 15:31

1

You can use wildcards with attribute selectors to do just that. Something like this should work for your case:

[class*='gallery-'] { do:something; }

See here for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Note the "Summary" section in the link above, it describes the different behavior of the "wildcard" symbols.

answered Mar 21 '14 at 15:31

Dryden Long

10,072
2
35
47

Thanks Dryden, is this moz specific? If so would there need to be prefix added for webkit / opera / etc? – Eric Brockman Mar 21 '14 at 15:35
@EricBrockman No, it is not browser specific and is supported in all modern browsers, including IE7 and above – Dryden Long Mar 21 '14 at 15:37

Chowlett · Accepted Answer · 2014-03-21T15:44:56.587

1

You could use the attribute selectors. Possibilities include:

[class|='gallery'] - matches all elements whose class attribute is exactly gallery, or begins gallery-
[class^='gallery'] - matches all elements whose class attribute starts with gallery

Note that I'm not clear what happens if your element has more than one class, as class="some-class gallery-1"

edited Mar 21 '14 at 15:44

answered Mar 21 '14 at 15:32

Chowlett

45,935
20
116
150

Thanks Chowlett, having more than one class does not seem to matter, in my case anyways. – Eric Brockman Mar 21 '14 at 15:42
`[class|='gallery']` and `[class^='gallery']` don't select multiple classes if the other class is first http://jsfiddle.net/k6Nqg/ – Mar 21 '14 at 15:45
On the other hand, `[class*='gallery']` may be too heavy-handed http://jsfiddle.net/k6Nqg/2/ – Mar 21 '14 at 15:49

score 0 · Answer 3 · edited May 23 '17 at 12:15

0

A simple alternative would be to simply apply two classes to your html elements:

class="gallery gallery-1"

Here is a very similar question and answer Is there a CSS selector by class prefix?.

edited May 23 '17 at 12:15

Community

1
1

answered Mar 21 '14 at 15:28

marteljn

6,446
3
30
43

Thanks Marteljn, the problem is I'm using a WP gallery shortcode and the the classes are defined dynamically. The classes also have style attribute written for them in the WP core stylesheet which I'm trying to override. So even if I give it a separate class, I won't be able to overwrite the classes that are assigned in the WP core stylesheet. – Eric Brockman Mar 21 '14 at 15:32
The attribute selector answers should be workable for your case then. The only caveat is supporting older browsers. – marteljn Mar 21 '14 at 15:36

score 0 · Answer 4 · answered Mar 21 '14 at 15:31

0

Use CSS Selectors
For your example, you'll need this:

[class^='gallery']

(get all elements with a class name beginning with gallery)

answered Mar 21 '14 at 15:31

darkchico

647
7
7

Applying gloabal css rules regardles of class/ id suffix

4 Answers4