Using commas to select different CSS Styles?

I've been wondering how to do this for a while now... I'm not sure how to explain it.. so i'll try my best to show you.


Instead of using:

.class-1 a {
css here
}

class-2 a {
css here
}


i want to use something like this, but i don't know if i'm doing it right, or how to do it...:

class-1 a, class2 a {
css for both classes here..
}


Is that possible to do, and am i doing it right? Should i just add a comma between each class name, like above?

Thanks
-Nike

Yes, you're doing it right, but you're forgetting the full stops before your class names ^^

Yes, you're doing it right, but you're forgetting the full stops before your class names ^^

More info please.. what do you mean?

I guess it depends on where you are from to understand what a full stop means. It means a dot or a period in the American English language.
.class-1 a, .class2 a {
css for both classes here..
}

I guess it depends on where you are from to understand what a full stop means. It means a dot or a period in the American English language.
.class-1 a, .class2 a {
css for both classes here..
}

Oh yea, i'm sorry... I totally forgot the dots xD, thanks. I understand now :)

If you are trying to allow people to change the style, colours etc of a website you are going the wrong way about it.


.class1, .class2
{
color:#000;
background:#fff;
}

Will asign black text on a white background to both classes. It's the same as:

.class1
{
color:#000;
background:#fff;
}

.class2
{
color:#000;
background:#fff;
}

All the best - redspyder

Thanks redspyder. :)

I've seen people do this too:

.class1 .class2 {
css here
}

without the comma between, what is that for then? Is it even correct?

-Nike

It means an element with class2 is nested within an element with class1. An example would be:


<div class="class1">
<div class="class2">
The css is applied to this content.
</div>
</div>

It means an element with class2 is nested within an element with class1. An example would be:


<div class="class1">
<div class="class2">
The css is applied to this content.
</div>
</div>


Why can't i just use

class-2 {
css here..
}

instead of

class-1 .class-2 {
css here...
}

?? I don't see the point with it?

It makes the selector more specific, which gives it more weight in deciding the final outcome.

Also, you may have classes outside a container element, like so:

<ul>
<li class="alt">miaow</li>
<li>rawr</li>
<li class="non-feline">
<ul>
<li class="alt">squeak</li>
<li class="alt">moo</li>
<li>eep!</li>
</ul>
<li class="alt">meow</li>
</ul>

You may want to select only the .alts within .non-feline.

Aaaah, ook, i think i get it.


If i use this CSS

.outer-div {
font-size: 16px;
font-weight: bold;
}

.inner-div {
font-size: 16px;
}


For this code...

<div class="outer-div">
<div class="inner-div"></div>
</div>


Then the outer Div will be bold and with a 16px font.. and the inner div will have a 16px font and then it will use the bold tag from the outer div..? So the inner-div will also be bold?

So the inner-div will also be bold? Yes it'll be inherited to the .inner-div

(assuming you meant .inner-div {
font-size: 16px;
} above)

abduraooft, yes.. sorry i wrote wrong :P

Exellent, now i understand this too :) Thanks!

Exellent, now i understand this too
CSS specificity (http://www.htmldog.com/guides/cssadvanced/specificity/) is also worth a look.