CSS help on ID and Class

[sakii]

Hi,

i would like to ask why i do see some css is coded in this way :

`
#id .myclass .myclass2 {

my property
}
`

is it referring to setting .myclass2 property if so why can’t we just use .myclass2{ } instead and have to put #id .myclass .myclass2 ?

[Kingslayer]

Specificity is the word you are looking for ;).

https://css-tricks.com/multiple-class-id-selectors/

Here Chris explains it in an easy way.

Here is some more to follow up =).

http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

[sakii]

ahhh learned something new today :)

THANKS !

[sakii]

hmm so does it means that it will select all the element within .myclass2 ?

If i use #id .myclass .myclass2 { } as what was stated in the first URL u mention.

[Paulie_D]

#id .myclass .myclass2 {
my property
}

This selector will select an element has a class of myclass2 that is within an element with a class of myclass that is within an element with an ID of id.

<div id="id">
     <div class="myclass">
           <div class="myclass2"></div> /* this one */
     </div>
</div>

It won’t select this

<div id="id2">
     <div class="myclass3">
           <div class="myclass2"></div> /* not this one */
     </div>
</div>

[sakii]

Hmm how about if the person do in this way:

#myid .myclass2 {
};

it is a short cut to myclass2 skipping myclass ?

[Paulie_D]

it is a short cut to myclass2 skipping myclass ?

Yes…it does but that’s not always what you want. It entirely depends on your requirements.

That’s why specificity and class nesting is so important.

[__]

When you see this kind of selector, keep in mind that while it might have been done on purpose for a specific need, it also may have been done out of ignorance and/or laziness.

Like @Paulie_D says, “[i]t entirely depends on your requirements.”

[Author]

Posts