How to stop a CSS rule from applying to a specific element

Question

I have a CSS rule like so:

a {
  line-height: 50px;
  display: inline-block;
  text-decoration: none;
  font-size: 16px;
  color: white;
}

And this HTML:

<a href="/test">test</a>

How can I stop the CSS rule applying to just this element?

score 7 · Answer 1 · answered Aug 01 '15 at 13:47

7

If a selector matches an element, then it matches the element.

You have three options:

Change the selector so it doesn't match
Change the element so it doesn't get matched
Write another CSS ruleset which falls further down the cascade, and override every property you don't like in the first ruleset with a new value.

answered Aug 01 '15 at 13:47

Quentin

914,110
126
1,211
1,335

the 3rd option worked well for me! – Matthew Lock Dec 01 '17 at 08:26

Michael Benjamin · Answer 2 · 2015-08-01T14:08:59.073

You can use class selectors (.foo) as opposed to element selectors (a) in your CSS declarations.

So instead of doing 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 this:

CSS

.foo {
   line-height: 50px;
   display: inline-block;
   text-decoration: none;
   font-size: 16px;
   color: white;
}

HTML

<a class="foo" href="/test">test</a>

When you don't want your a element to have those styles, simply omit the class or apply a different class you may have declared.

Inline Styles

Another option, which solves your problem but doesn't really conform to best practices (on several levels), is to use inline styles.

Since you're saying you don't want the external (or embedded) styles to apply, you therefore just want the a styles to be different. You can accomplish your goal with something like this:

Leave the original CSS declaration unchanged.
Change the HTML: <a href="/test" style="your preferred styles here">test</a>

The inline styles will take precedence over other styles in this case.

NOTE that inline styles take precedence over external and embedded styles except in cases when the external and embedded declarations contain !important and the inline style does not contain !important.

well, now i can not do it that way that's why I asked this question. Any idea about my question? — zeeks, Aug 01 '15 at 13:41
@zeeks setting a global tag rule like that is a huge mistake and requires over riding it every time you want to use an `` tag that would be different — charlietfl, Aug 01 '15 at 13:46
For clarity, can you please explain why you're creating a style declaration for an `a` element, but then don't want those styles to apply to `a` elements? — Michael Benjamin, Aug 01 '15 at 13:49

score 1 · Accepted Answer · answered Aug 01 '15 at 14:09

Thank you everyone for the suggestions, but the following answer worked perfectly for me:

a.none {
  line-height: inherit;
  display: inherit;
  text-decoration: inherit;
  font-size: inherit;
  color: inherit;
}

Create that class and then attach it to the a tag like this:

<a class="none" href="/test">test</a>

Someone posted this before and then deleted it, i don't know why, but thank you!

How to stop a CSS rule from applying to a specific element

3 Answers3