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>
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 (.)
This is not possible with CSS selectors.
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.
CSS [attribute~=value] Selector The [attribute~=value] selector is used to select elements with an attribute value containing a specified word.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With