SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    confused about child selectors.

    Would appreciate some advice on child selectors please.

    I have a navbar, navbar-inner and want to influence the list w/in it.
    tried
    navbar-inner>.ul { height:###;}
    tried
    navbar ul { height:###;}
    eventually setteled for giving the navbar an id and
    #id ul { height:###;}

    what is the correct way to use a child selector to influence an element?
    while at it can someone please explain or point me to a link for the diff between
    .class .class {} (or id, w/ a space after the first selector)
    and
    .class.class {} (or id, w/out a space after the first selector)

    thank you
    d

  2. #2
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    so for example to be more specific, i only in this case want to affect the navbar-inner for the previous three selectors. but this will most likely affect the navar-inner site wide.

    Code:
    gvtSvcsMain, #gvtSvcs01, #gvtSvcs2 .navbar-inner{
    height:198px;
    color: #whatever;
    }
    Code:
    gvtSvcsMain, #gvtSvcs01, #gvtSvcs2 >.navbar-inner{
    height:198px;
    color: #whatever;
    }
    doesn't do it.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    We can't really advise on this without seeing the HTML that goes with it.

    Quote Originally Posted by pdxSherpa View Post
    the diff between
    .class .class {} (or id, w/ a space after the first selector)
    and
    .class.class {} (or id, w/out a space after the first selector)
    .class1 .class2 { } will style an element with a class of class2 that is inside another element with a class of class1.

    .class1.class2 { } will style an element only when it has both class1 and class2 applied to itself. E.g.

    Code:
    <div class="class1 class2">
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    In your first examples, you're missing the dots in front of .navbar in both versions, and you've got a for that shouldn't be there in front of ul, so assuming that isn't a copying error, that would explain why it isn't working.

    The difference between with and without a space:
    .a .b {...} targets the span here: <p class="a"><span class="b"> (class of b that is a child of class of a)
    .a.b {...} targets anything that has class="a b" (ie, one element with both classes)

    In your second post, I think you're missing a load of selector code. If you have
    .one, .two, .three ul {...}
    that will target anything with class="one", anything with class="two", and any list inside anything with class="three". If you want it to only apply to lists in each of the three parts of your list, you need to put the ul in each time.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    well , lets address some concepts ( rather than code) here
    ...but this will most likely affect the navar-inner site wide.
    if your style sheet are loaded site wide any and all code will affect the entire site. Sometimes , strategically breaking up style sheets is a good idea. If you want to override a behavior, but only on SOME PAGES and your site is large it is really the best way to do it. The other possibility would be to give the body element an ID or class aand ad those in the stylesheet to override your page rules ( heck even talking about doing it this way gets confusing tho).

    incidentally, if you KNOW for certain that some CSS will only apply to ONE document and you wouldn't be able to re use it,, you can consider hard coding the CSS withing a style tag in the page ( as opposed to linking it in). The added advantage of this is that CSS in a style tag OVERRIDES linked CSS.. no matter what.

    The other concept to address here is CHILDREN vs DESCENDANTS

    A child is directly contained within it's parent .. a descendant is within a root parent , but can be any level deep.

    let say you wanted to affect ONLY ANCHORS in the root level of a menu (<ul class='nav'>...</ul>); we also know ONLY LI can be children of ULs.

    Code:
    .nav>li>a {...}
    this means affect only the As which are the CHILD of the LIs whci are a CHILD of .nav

    if you used .nav>li a {...}(oops!) this would mean affect ANY A within the LIs which are a CHILD of .nav. So this would mean that any link in sub menus would also be affected, follow? I like to think of '>' as a directory path... you must give the whole path and specifically in order to reach your destination

    now, let say you want to change a style 3 levels deep:

    Code:
    .nav li  { .. your original style for level 1 & 2} 
    .nav li li>ul li {.. level 3 OVERRIDE RULES + additions}
    if you wanted to make sure the change occured ONLY at level 3, but was back to regular at level 4:
    Code:
    .nav li li>ul>li {.. level 3 OVERRIDE RULES + additions}
    I emphasized OVERRIDE RULES , because .nav li would be your general rules so they would still apply 3 level down thus you must override them. seems redundant, but this is the nature of CSS/ It really not about "naming" so much as it is about cascade and specificity. which leads us back to OPTINS.

    Another thing you can do is add the class in at an ancestor, let say the root UL

    Code:
    .nav li  { .. your original style for level 1 & 2} 
    .except li li>ul li {.. level 3 OVERRIDE RULES + additions}
    
     <ul class='nav except'>...</ul><!-- 3rd level here would  have rules applied to it-->
     <ul class='nav'>...</ul><!-- 3rd level here would be the same as the others-->

    I the best method to chose will depend on your specific goal and on the rest of your other code ( this is just the nature code). Hopefully this helps tho.

  6. #6
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you all.
    much obliged.
    d


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
  •