How to remove CSS properties if applied in css tag based

Question

This is very simple questions i know how to do it but i want to do it with some better way.I tried to find solutions online but couldn't find it.

Here is my css

a:link
{
  text-decoration:none;
  color:#fff;
  font-size:15px;
  font-family:'Ropa Sans', sans-serif;
  text-shadow:1px 1px 1px #000;
}

a:visited
{
  text-decoration:none;
  color:#2a9dc0;
  font-weight:normal;
  text-shadow:1px 1px 1px #000;
}

a:active
{
  text-decoration:none;
  color:#2a9dc0;
  text-shadow:1px 1px 1px #000;
}

a:hover
{
  text-decoration:none;
  color:#2a9dc0;
  text-shadow:1px 1px 1px #000;
}

Now i have put an anchor tag but i don't want all these properties to apply to it so what i did is apply a class name no_a and made all css properties none this is the way i did is there any other way?

<a class="no_a" href="#">
    <article class="home_sml_box_red">
        <section class="home_small_boxtext">
            explore
        </section>

        <section class="home_small_boximage">
            <img src="image/explore_icon.png">
        </section>

        <section class="home_small_lowtext">
            Learn More
        </section>
    </article>
</a>

Check out this [answer](http://stackoverflow.com/a/7398330/1401094) — Patsy Issa, Aug 01 '13 at 09:03
@Patsy Issa Link makes exact sense. I am also using common css for two different module and overwriting whenever necessary. I haven't made a new css as it is not impacting big time. — Akki619, Aug 01 '13 at 09:06
see @suhail solution that makes a proper justification how to overwrite... — Akki619, Aug 01 '13 at 09:09

score 2 · Answer 1 · answered Aug 01 '13 at 09:05

best way is

on defining css put some class in front (or id if only one time your are using the div). for eg:

.container a {
              text-decoration: none;
               color:#fff;
               font-size:15px;
                font-family: 'Ropa Sans', sans-serif; sans-serif;sans-serif;
               text-shadow: 1px 1px 1px #000;
                     }

now you can use this in a <div class ="container"><a href="#">sdfadsf</a>

score 1 · Answer 2 · answered Aug 01 '13 at 09:16

1

Use the :not() selector.

a:not(.no_a) {
     /* style rules for all anchors without class of no_a */
}

answered Aug 01 '13 at 09:16

Anthony

36,459
25
97
163

Nick Coons · Answer 3 · 2013-08-01T17:14:54.497

0

Your best bet, if you don't want these properties to apply to all <a> tags is to not blanket apply the CSS to all <a> tags. Instead, create a class that these attributes apply to, and then assign that class to the <a> tags that you want to have those attributes.

edited Aug 01 '13 at 17:14

answered Aug 01 '13 at 09:05

Nick Coons

3,682
1
19
21

Maybe, but it's the correct way. If you don't want attributes applying to all `` tags, don't apply them to all `` tags. – Nick Coons Aug 01 '13 at 09:08
The `:not` selector is supported in all major browsers including IE9+. Or so the tubes tell me. – Anthony Aug 01 '13 at 09:17

How to remove CSS properties if applied in css tag based

3 Answers3