Call an CSS Item with Class AND ID?

Question

one quick questions, since I wasn't able to find something yet.

If I have such an HTML Code

<ul class="bla">
  ...
</ul>

<ul class="bla" id="blubb">
  ...
</ul>

and a CSS Code like

.bla {do something}

how can I change some attributes in my 2nd ? I heard the best way is to give the class an unique ID and then overwrite the CSS from the "bla" class. So first question : Is that the best way ?

Second question would be - how do I call it best in CSS ?

just like :

.bla {do something}
#blubber {do something else}

or is there also another way to be more specific (something like .bla#blubber <-- which wont work just meant - if there is a way to call BOTH elements to be "more specific).

Thanks for helping out :)

Answer 1

Over writing every property my be difficult in some cases. specially when you have a number of properties specified. But what you can do is put the common one's in the more general selector, like in the class selector, and put more specific properties in Id selectors. U can also put default style in the general selector. And for the second question #idSelct.Class Works.

Answer 2

First problem:

You can do that, or even add a new class like this:

<ul class="foo bar"></ul>

And then reference in the css file as .foo.bar {...}.

Second problem:

As @cris9696 suggested, you can use the #id.class form, example: http://jsfiddle.net/gKCbc/

Answer 3

Maybe this for the second problem?

#id.class{
//css
}