2

Im trying to figure this out, please consider these styles:

.text_left
{
text-align:left;
}

.text_right
{
text-align:right;
}

.text_cen
{
text-align:center;
}

.form_container_header
{

width:95%;
margin-left: auto ;  
margin-right: auto ;
margin-bottom:35px;
text-align:center;
}

Now , when I apply these styles to my DIV like so:

<div class="form_container_header text_left">

Can someone explain to me why The content of the DIV is centered and not left aligned?

BUT when I move the "text_left" class below the "form_container_header" class in the style sheet it then left aligns?

thank you

Improve this question
2
  • 2
    sounds like another Harry Potter episode
    – Andriy Volkov
    Commented Jul 15, 2009 at 20:41
  • I edited my answer to include more information
    – marcgg
    Commented Jul 15, 2009 at 20:45

6 Answers 6

Reset to default
6

Because both of them are at an equal specificity (only referencing class), the one at the end of the file has precedent. If you were to make .text_left be div.text_left, then it is more specific and it will override .form_container_header no matter where it is in the file.

From W3C:

6.4.3 Calculating a selector's specificity

A selector's specificity is calculated as follows:

  • count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
  • count the number of ID attributes in the selector (= b)
  • count the number of other attributes and pseudo-classes in the selector (= c)
  • count the number of element names and pseudo-elements in the selector (= d)

The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD.

Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

Some examples:

 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
<HEAD>
<STYLE type="text/css">
  #x97z { color: red }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>

In the above example, the color of the P element would be green. The declaration in the "style" attribute will override the one in the STYLE element because of cascading rule 3, since it has a higher specificity.

Improve this answer
0
2

When you write a style like "text_left", you might want to use !important. This will override any other styles that set that value.

The following works.


.text_left
{
text-align:left !important;
}

.text_right
{
text-align:right !important;
}

.text_cen
{
text-align:center !important;
}

.form_container_header
{

width:95%;
margin-left: auto ;  
margin-right: auto ;
margin-bottom:35px;
text-align:center;
}

<div class="form_container_header text_left">


EDIT: Please read the comments on this answer before doing this. There are some concerns about using !important recklessly.
Improve this answer
4
  • 3
    using !important should be avoided when possible. I'd just order my classes better / do not put text-align in the class .form_container_header
    – marcgg
    Commented Jul 15, 2009 at 20:30
  • can you explain why using !important should be avoided? thanks
    – chicane
    Commented Jul 15, 2009 at 20:32
  • Because it will take over the whole CSS priority logic. !important is the last resort when you don't have a choice. Usually it's used when you have a really complex CSS structure and have to do a fix, or when you have to maintain a legacy website that is messed up. Using that in such a situation will lead to a lot of headaches
    – marcgg
    Commented Jul 15, 2009 at 20:39
  • 2
    to put it in perspective: when someone commits a crime, do you give them the harshest sentence possible (death penalty, life behind bars, whatever) or a punishment fitting their transgression? !Important is the harshest tool in the tool box. Using !important is a last resort because 99% of the time there is a better, wiser option available to you.
    – jacobangel
    Commented Jul 15, 2009 at 20:45
1

My call would be because .form_container_header is defined at the end of the file, the last defined has priority (it's not the only priority rule, but in this case that's the one being applied)

Edit: this is how I'd do it (removed text-align definition in form_container)

.text_left
{
text-align:left;
}

.text_right
{
text-align:right;
}

.text_cen
{
text-align:center;
}

.form_container_header
{

width:95%;
margin-left: auto ;  
margin-right: auto ;
margin-bottom:35px;

}

<div class="form_container_header text_left">

EDIT 2: All this is called the CSS cascade. You can find a reference here : http://www.w3.org/TR/CSS2/cascade.html and a cool article here http://reference.sitepoint.com/css/cascade

Improve this answer
4
  • wow, that is really interesting, this would mean any single overriding style that is defined at the top of my style sheet would be useless....
    – chicane
    Commented Jul 15, 2009 at 20:25
  • this is how CSS works, I'm sorry if you don't like it but that's not my fault
    – marcgg
    Commented Jul 15, 2009 at 20:31
  • hey no need to be sorry, im just learning so some of these things come as a suprise
    – chicane
    Commented Jul 15, 2009 at 20:38
  • 1
    think of it like this chicane: start with the most general rules at top, and then write exceptions to the rules as you go down. It's all part of the learning curve.
    – jacobangel
    Commented Jul 15, 2009 at 20:47
1

Here is some information on CSS specificity. I find that this topic is not very well understood, and understanding it will save you piles of time.

http://www.w3.org/TR/CSS2/cascade.html#specificity

Improve this answer
1

Check out these great slides from maxdesign on css cascade

http://www.maxdesign.com.au/2009/06/30/css-cascade

Improve this answer
0

I don't know if I'm right (infact, I don't have any evidence only itty-bits of fragmented memory on the matter...) but I thought that it was something to do with the cascade. The scale of importance goes something like this:

stylesheet element
stylesheet class
stylesheet id
document defined stylesheet element
document defined stylesheet class
document defined stylesheet id
inline style attribute

Hmm... I might just be muttering. Apologies if this is so.

Improve this answer
1
  • While that's probably true (looks logical from my POV), OP question have all styles coming from one place (i.e. document defined stylesheet class).
    – Adrian Godong
    Commented Jul 15, 2009 at 20:47