I'm trying to get my icon font to work and I need to exclude icon-blue
[class^="icon-"], [class*=" icon-"] {
font-family: 'fontname';
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
How can I do this?
First
[class^="icon-"], [class*=" icon-"]
dont make sense because [class^="icon-"] is included in [class*=" icon-"]
To exclude you can use:
[class*="icon-"]:not(.icon-blue)
You have a full example to play here: http://codepen.io/luarmr/pen/dozjZW
You can use the :not() selector like
[class^="icon-"]:not([class="icon-blue"]),
[class*="icon-"]:not([class="icon-blue"]) {
font-family: 'fontname';
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^="icon-"]:not([class="icon-blue"]), [class*="icon-"]:not([class="icon-blue"]) { background: green; }
<div class="icon-red">test</div> <div class="icon-yellow">test</div> <div class="icon-blue">blue</div> <div class="small-icon-red">test</div>
Note, you can simplify your selector to just
[class*="icon-"]:not([class="icon-blue"]) {
since *=
will cover the ^=
cases also.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.