Menu
Is there a CSS selector where i can select all anchors with a class containing icon-*
<a class="icon-a icon-large scrollTo" href="#a"></a>
<a class="icon-large icon-b scrollTo" href="#b"></a>
<a class="icon-large scrollTo icon-c" href="#c"></a>
I just jumbled up the icon- since i want to check if the css selector can handle all cases.
I want to be able to change the style of all anchors that contains the class icon-*. This code doesn't seem to work.
a [class^="icon-"], a [class*=" icon-"] {
text-decoration: none;
color: #1BA1E2;
}
Is Javascript my only option?
427
Wildcard Selectors (*, ^ and $) in CSS for classes. Wildcard selector is used to select multiple elements simultaneously. It selects similar type of class name or attribute and use CSS property.
It selects similar type of class name or attribute and use CSS property. * wildcard also known as containing wildcard. [attribute*=”str”] Selector: The [attribute*=”str”] selector is used to select that elements whose attribute value contains the specified sub string str.
CSS .class Selector 1 Definition and Usage. The .class selector selects elements with a specific class attribute. ... 2 Browser Support 3 CSS Syntax 4 More Examples
The second targets the same element, but overrides the color, instead of having to use: or perhaps prefacing the selector with something even more specific. More useful is multiple classes and using them in the “object oriented” css style that is all the rage lately.
You were using an incorrect selector - a [class] is all anchors with a class as a descendant.
Basically, any element descending from an <a>, which starts with or contains the class icon- will be targeted.
What you want is to select all anchors starting with or containing that class themselves - a[class]:
a[class^="icon-"], a[class*=" icon-"] {
text-decoration: none;
color: #1BA1E2;
}
jsFiddle example here.
83
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
