Using commas to select different CSS Styles?

[najkiie]

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]

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

[najkiie]

Originally Posted by CyanLight

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_]

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]

Originally Posted by _Aerospace_Eng_

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]

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]

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]

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]

Originally Posted by snowieken

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]

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]

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]

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]

abduraooft, yes.. sorry i wrote wrong :P

Exellent, now i understand this too Thanks!

[abduraooft]

Exellent, now i understand this too

CSS specificity is also worth a look.