Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: styling when element has two classes

I have been looking at the w3 page on css selectors and have not found any promising leads, so I thought I would ask...

Is there a way to style a single element with two classes differently than if it was one class?

Example:

<a class="foo">Red</a> <a class="bar">Yellow</a> <a class="foo bar">Orange</a>  a.foo { color:red; } a.bar { color:yellow; } a.foo.bar { color:orange; } 
like image 424
superUntitled Avatar asked Oct 12 '10 20:10

superUntitled


People also ask

Can an element have 2 CSS classes?

HTML elements can be assigned multiple classes by listing the classes in the class attribute, with a blank space to separate them.

Can one element have two classes?

While an element can only have a single ID attribute, you can give an element several classes and, in some cases, doing so will make your page easier to style and much more flexible. If you need to assign several classes to an element, add the additional classes and simply separate them with a space in your attribute.

How do you call two classes in CSS?

To specify multiple classes, separate the class names with a space, e.g. <span class="left important">. This allows you to combine several CSS classes for one HTML element.


2 Answers

You just answered yourself. Be wary of the IE6 bug.

like image 176
meder omuraliev Avatar answered Oct 05 '22 15:10

meder omuraliev


Yeah dude, you have just answered it yourself. Have a quick scan on these two pages -

  1. http://webdesign.about.com/od/css/qt/tipcssmulticlas.htm
  2. http://www.maxdesign.com.au/articles/multiple-classes/

Hope that helps :)

Nick

like image 24
Nicholas Mayne Avatar answered Oct 05 '22 16:10

Nicholas Mayne