How to stop a CSS rule from being applied to a specific element
Thanks everyone for the suggestions, but the following answer worked great for me:
a.none {
line-height: inherit;
display: inherit;
text-decoration: inherit;
font-size: inherit;
color: inherit;
}
Create this class and then attach it to the tag:
<a class="none" href="/test">test</a>
Someone posted this before and then deleted it, I don't know why, but thanks!
source to share
If a selector matches an element, it matches an element.
You have three options:
- Change the selector so that it doesn't match
- Modify the element so that it doesn't match.
- Write another set of CSS rules that falls below the cascade and overrides any properties you don't like in the first set of rules with a new value.
source to share
You can use class selectors ( .foo
) as opposed to element selectors ( a
) in your CSS declarations.
So instead of this:
CSS
a {
line-height: 50px;
display: inline-block;
text-decoration: none;
font-size: 16px;
color: white;
}
Html
<a href="/test">test</a>
You can do it:
CSS
.foo {
line-height: 50px;
display: inline-block;
text-decoration: none;
font-size: 16px;
color: white;
}
Html
<a class="foo" href="/test">test</a>
If you don't want your element to a
have these styles, just omit the class, or apply another class that you may have declared.
Inline Styles
Another option that solves your problem but doesn't follow best practices (at multiple levels) is to use inline styles.
Since you say you don't want external (or inline) styles to apply, you just want the styles to a
be different. You can accomplish your task something like this:
- Leave the original CSS declaration unchanged.
- Change your HTML:
<a href="/test" style="your preferred styles here">test</a>
In this case, inline styles will take precedence over other styles.
Note that inline styles take precedence over outlines and inline styles, unless !important
inline and inline declarations contain but inline style does not !important
.
source to share