...

View Full Version : Using commas to select different CSS Styles?



najkiie
02-15-2009, 09:54 PM
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

Apostropartheid
02-15-2009, 10:08 PM
Yes, you're doing it right, but you're forgetting the full stops before your class names ^^

najkiie
02-15-2009, 10:09 PM
Yes, you're doing it right, but you're forgetting the full stops before your class names ^^

More info please.. what do you mean?

_Aerospace_Eng_
02-15-2009, 10:12 PM
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..
}

najkiie
02-15-2009, 10:13 PM
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 :)

redspyder
02-15-2009, 10:20 PM
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

najkiie
02-15-2009, 10:25 PM
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

snowieken
02-15-2009, 10:32 PM
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>

najkiie
02-15-2009, 10:34 PM
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?

Apostropartheid
02-16-2009, 12:30 AM
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.

najkiie
02-16-2009, 08:23 AM
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?

abduraooft
02-16-2009, 08:42 AM
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)

najkiie
02-16-2009, 08:45 AM
abduraooft, yes.. sorry i wrote wrong :P

Exellent, now i understand this too :) Thanks!

abduraooft
02-16-2009, 08:52 AM
Exellent, now i understand this too
CSS specificity (http://www.htmldog.com/guides/cssadvanced/specificity/) is also worth a look.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum