SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: CSS selectors

  1. #1
    SitePoint Zealot sularome's Avatar
    Join Date
    Jan 2006
    Location
    Poland
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS selectors

    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:
    Code:
       <div id="one">
         <p class="two">
           <span class="three">test</span>
         </p>
       </div>
    How is better to address the span:
    Code:
    #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.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Birnam wood is come to Dunsinane

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 { }

  4. #4
    SitePoint Zealot sularome's Avatar
    Join Date
    Jan 2006
    Location
    Poland
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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).

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •