View Full Version : css property order?

06-13-2012, 07:39 PM
Hello, I just realized that the order you place the css background properties in is important, and effects how they work. I found this out after placing background:url(pic.png) after background-attachment:fixed . Doing so caused the background image to not be fixed.

My question is, are there other css properties that need to be in a certain order for them to work properly? And if so, could someone list these for me, or point me somewhere that might have them listed?

I just did some reorganization of my css, and reordered some properties to my liking, not knowing the order mattered, so I'm worried some other things may not work properly now :eek:

06-13-2012, 09:11 PM
The one nearest the end always takes priority.

Since background: includes background-attachment: specifying it after the attachment replaces that value.

Had you specified background-image: instead of background: then you wouldn't have overwritten the attachment setting.

Specifying background: is a shortcut for specifying values for all of
and overwrites all of those.

06-13-2012, 09:38 PM
The order does not matter if you are explicit, but if you use any shortcut then it should be first. However it is really bad practice to use both a shortcut and the explicit narrow scope properties in the same rule.

06-13-2012, 09:43 PM
Ya I was testing something and wasn't sure if I wanted to keep the fixed property so I made it separate for the time being. Thanks for the clarification. I also noticed the link states have to be in a certain order as well.

06-13-2012, 09:54 PM
The link states are a different case. CSS rules are applied in listing order so if more than one state applies the last one is used when the declaration types have equal priority.

Some developers will play with the order to get different effects. Some prefer to always show visited links and will put visited after hover, while others put the hover after visited because they always want the hover no matter whether the site has been visited or not.

The best way to go is just test as you go... sometimes a "mistake" will yield an effect you like, but you might miss it if you do dozens of changes between tests.

06-13-2012, 11:26 PM
The only reason link states need to be in a specific order is because some states are included in other states and so the more specific one needs to come after the ones that include it.

All links satisfy :link regardless of any other state so it must come first or it will override all the others.

A :visited link is one that has been previously visited even if it now has the focus or has the mouse hovering over it so it must come second or it will override the others.

For a link to be :active it must either have the mouse over it and so satisfy :hover (since it is made active by depressing a mouse button while the mouse is over the link) or it must have the :focus (as the other way to make a link active is to depress the enter key while it has the focus). So :active must come last.

The order of :hover and :focus doesn't matter except that whichever you put second will be the one to apply if both apply to the same element at the same time.

06-13-2012, 11:36 PM
Ya I was testing something and wasn't sure if I wanted to keep the fixed property so I made it separate for the time being. Thanks for the clarification. I also noticed the link states have to be in a certain order as well.

In addition, you can either add separate specific properties or a single property with multiple values.

border-color: red; border-style: double; border-size: 5px;
/* or */
border: red double 5px;

I am sure they work as well.

06-13-2012, 11:43 PM
Hope I"m not off point, but I've been wondering where new :FOCUS and :TARGET pseudo classes would come in the "LoVeHA" scheme. I figure keyboard (tab) activated :FOCUS would be similar to :hover. Is :TARGET for named anchors (like plain anchor A)? Or what?

I always include and start off with plain anchor A { text-decoration: none: } because styles are inherited from and between states.

As far as "order of properties" goes, there seems to be no ONE formula so I try to check individual references property-by-property.

06-14-2012, 01:38 AM
The :target pseudo class has nothing to do with anchors themselves, it’s the element to which an internal anchor links (i. e. the element that is the target of the link) and applies to the element after that internal link has been clicked.

<a href="#example">Link</a>
<div id="example">Target</div>
div:target {background: red;}

Furthermore, the anchor pseudoclasses are just like regular classes and can also be combined as such:

a {…} /* applies to all anchor elements */
a:link {…} /* only applies to anchor elements that are (unvisited) links (i. e. that have an href attribute) */
a:hover {…}
a:visited:hover {…} /* overrides hover styles for visited links only */
a:link:hover {…} /* only applies to anchors that are unvisited links */
a:visited:focus {…} /* overrides focus styles for visited links only */
a:visited:active {…} /* overrides active styles for visited links only */

An anchor gains focus when you use the tab key to switch between links and/or form controls or when you click the link (as long as the mouse button is down, the :active pseudo class is triggered and overriding :focus, though).

06-14-2012, 06:05 PM
Nice post thanks for the share and the information