Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS !important rule not overriding text alignment

a {
        font-size: 8pt;
        text-align: left !important;
        text-decoration: none;
  }

.main {
        text-align: center;
  }

 <div class="main">
    <a href="#new_york_city">New York City</a><br />
    <a href="#long_island">Long Island</a><br />
    <a href="#upstate">Upstate New York</a><br />
</div>

This is a compact version of what I have and for me, using Firefox 5, the links are STILL centered, even though I I'm using !important on the "text-align: left". It's confusing and irritating because i thought !important was the highest specificity and overrode all other rules.

What's wrong here?

like image 940
Mathias Schnell Avatar asked Jul 15 '11 18:07

Mathias Schnell


People also ask

How do you avoid important?

To avoid using ! important , all you need to do is increase specificity. In your case, both of your selectors have identical specificity. The issue is most likely caused by your media query being placed before your "Normal CSS", and thus getting overridden.

Does text-align inherit?

In CSS, some properties are naturally inherited, by default. text-align is one of these, along with font , color , and others. Here is a rather small (but mostly robust) list of properties which will be, and will not be, inherited by children.


1 Answers

The text alignment needs to be set on the parent element of the anchor-links, you cannot tell an anchor-link to align itself to the left as it is of a fixed width. You need to either remove text-align:center; from the .main section, or add another class to the div like 'alignLeft' and apply the alignment with the !important rule there.

like image 123
Tom Walters Avatar answered Sep 23 '22 02:09

Tom Walters