Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get element by its partial class name CSS

I am creating few css buttons and would like to style them 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 that contain class my-button

now I want to get deep in to it and do this

[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 class -large might come up in some 3rd party CSS added by user I would like to be more specific and say something like this instead

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

so that I dont have to do this

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 a way to do this? Is it possible at all, to nail the middle word instead contains only?

I know I can space the class names etc , but would love to give this a try since, to me, this**

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

looks cleaner than this:

<span class="mybuttons-button color large"></span>
like image 375
Benn Avatar asked May 19 '14 21:05

Benn


People also ask

How do you select elements with class name part '?

To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify that only specific HTML elements should be affected by a class. To do this, start with the element name, then write the period (.)

Is there a CSS selector by class prefix?

This is not possible with CSS selectors.

How do you select an element of a child in CSS?

The child combinator ( > ) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Elements matched by the second selector must be the immediate children of the elements matched by the first selector.

What is the CSS selector for an a tag containing the title attribute?

CSS [attribute~=value] Selector The [attribute~=value] selector is used to select elements with an attribute value containing a specified word.


1 Answers

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

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

Granted it won't work in a case like this:

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

since it contains both mybuttons-button and -large.

If you didn't think that would happen or be an issue you should be fine. Here's a fiddle: http://jsfiddle.net/3wEJe/

Definitely wouldn't recommend it though.

like image 177
willanderson Avatar answered Sep 19 '22 01:09

willanderson