Geek Answers Handbook

How to get an element by its partial CSS class name

I am creating several css buttons and would like them to be as short as possible, so I started like this

[class*='mybuttons-button']{ margin-top:5px; -webkit-border-radius:4px; -khtml-border-radius:4px; -moz-border-radius:4px; border-radius:4px; display:inline-block; padding:6px 12px; color:#fff; vertical-align:middle; cursor:pointer; }

which will affect all elements containing the my-button class

now I want to go deeper into it and do it

 [class*='-large']{ padding: 10px 16px; font-size:120%; line-height: 1.33; -webkit-border-radius:6px; -khtml-border-radius:6px; -moz-border-radius:6px; border-radius:6px; } [class*='mybuttons-button-color']{ background:blue; }

but since the -large class may appear in some third-party CSS added by the user, I would like to be more specific and say something like this instead

 [class*='mybuttons-button-*ANYTHING*-large']

so I should not do that

 mybuttons-button-color-large mybuttons-button-red-large mybuttons-button-green-large mybuttons-button-color-medium mybuttons-button-red-medium mybuttons-button-green-medium

Does anyone know how to do this? Is it possible at all to have a nail instead of a middle word instead?

I know that I can run through class names, etc., but I would like to try this because for me it **

 <span class="mybuttons-button-color-large"></span>

looks cleaner than this:

 <span class="mybuttons-button color large"></span>
+7
css css-selectors
source share
2 answers

In the same way, you can do this .class.class2.class3 { /*styles*/ } to target only things that have all 3 classes, you can combine attribute selectors to do the same:

 [class*="mybuttons-button"][class*="-large"] { /*styles*/ }

Of course, it will not work in this case:

 <span class="my-buttons-button-color-small something-else-large"></span>

since it contains both mybuttons-button and -large .

If you do not think this will happen or be a problem, you should be fine. Here's the fiddle: http://jsfiddle.net/3wEJe/

Would definitely not recommend this.

+13
source share

If you separate class names, then you can use the CSS selector only to capture an element with two classes instead of relying on wildcards:

 <span class="mybuttons-button color large"></span> .mybuttons-button.large { font-size: 120% }

Remember that ".class1.class2" is different from ".class1.class2" (with a space): the first looks for an element with BOTH classes; the second is looking for descendants of class 1 that are class2.

-one
source share

More articles:


All Articles