CSS selectors

[sularome]

Hello,

I just want to ask the more experienced designers here how they define their selectors, classes etc... What I mean is when you have for example:

   <div id="one">
     <p class="two">
       <span class="three">test</span>
     </p>
   </div>

How is better to address the span:

#one .two span.three{...}
.three{...}
#one .three{...}
and so on..

Is there any rule here? I will appreciate if you show me an article about that :*)
Thanks in advance.

[AutisticCuckoo]

It depends.

If the rule should apply for all elements with class three, then use .three {...}.

If the rule only applies if the element with class three occurs as a descendant of an element with id="one", then use #one .three {...}.

If the rule only applies if the element with class three is an immediate child of an element with class two, then use .two>.three {...}.

And so on.

[Dan Schulz]

Or in some cases (be careful, this does require some experience), just ditch the classes altogether and just target the p and span elements directly, like so:

#one p span { }

#one span { }

#one p { }

[sularome]

I wasn't quite understood I think. But i can't format my question as well :*). I know how to address elements but i'm wondering if there's a habit here. I could certainly address the span by 1000000 ways. But in future if I or other designer define .three as class, it might overwrite my style. If I purposely want to overwrite the style but I don’t have enough selectors I would have to use then (!important). So that’s what I’m asking here, is it appropriate to use less specific selectors like (span.three) or more precise like (#one .two span.three).

[Kravvitz]

Are you sure that Tommy didn't answer your question? Another way to say what he said is: use the minimum number of selectors you need to target the element(s) that you want to target.

I avoid using !important because when I do use it it often causes a problem with specificity of something somewhere.