Wiping Out Inherited CSS Styles

Feb 27 2009

Sure, you can use the !important css keyword in your stylesheets to override inherited styles, but what about when you want to simply wipe out or remove a style defined in a parent? Use the auto keyword.

Let’s say you have a style defined in a global.css sheet defining a position for a class called menu:

ul.menu {
position:absolute;
left: 10px;
top: 10px;
}

This will position a

element

10 pixels away from the top left corner of the parent element.  But what if you want to move that menu to the right side of the parent element, but you can’t change the defined style in global.css?

You create a new stylesheet or define an inline style, and override the ul.menu class by specifying

ul.menu {
right:10px;
}

But this simply stretches the menu to the other corner.   We need to override the left:10px; style with the default style (as if we never specified the left:10px; to begin with).  left:none; won’t work and left:0; won’t either.  The solution is the auto keyword:

ul.menu {
right:10px;
left:auto; /* removes left:10px from parent */
}

Voila, you’re done!  It’s as if the left:10px was never defined!