Confused about child selectors

HTML & CSS
1

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

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.

gvtSvcsMain, #gvtSvcs01, #gvtSvcs2 .navbar-inner{
height:198px;
color: #whatever;
}

gvtSvcsMain, #gvtSvcs01, #gvtSvcs2[COLOR="#FF0000"] >[/COLOR].navbar-inner{
height:198px;
color: #whatever;
}

doesn’t do it.

3

We can’t really advise on this without seeing the HTML that goes with it.

.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.

<div class="class1 class2">
4

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

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.

.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:

.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:

.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

.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

thank you all.
much obliged.
d