Nesting CSS issue

Question

I created fiddle to show the example: I think I am setting parent CSS and then I apply the child's CSS. But it seems like it is being ignored.

http://jsfiddle.net/8PWNw/2/

<div id="displaybox" class ="displaybox" style="display: none;">
    <div class = "parent" >
        <a href="reply.php?id=1">Parent 1</a>
    </div>
    <span  class ="child"  style="padding: 0 10 "><a href="reply.php?id=3">Child 1</a></span>
    <div class = "parent" >
        <a href="reply.php?id=2">Parent 2</a>
    </div>
    <span  class ="child"  style="padding: 0 10 "><a href="reply.php?id=4">Child 1</a></span>
</div>

Please advise. I am new to CSS, so there are many things that I need learn.

thank you; I don't know why, but it was saying `no class defined'; do I just dumped the whole page — Andrew
– Andrew, Commented Apr 29, 2013 at 8:35

haim770 · Accepted Answer · 2013-04-29 08:36:54Z

1

Line 23 in your CSS:

/* this is actually saying element with both 'parent' and 'a' class */

    .displaybox .parent.a {
        color: black; 
    }

You probably meant:

/* this is actually saying all 'A' elements within element with 'parent' class */

    .displaybox .parent a {
        color: black; 
    }

That is why your 'A' element style is being ignored.

edited Apr 29, 2013 at 8:36

answered Apr 29, 2013 at 8:31

haim770

49.2k7 gold badges113 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Quentin · Accepted Answer · 2013-04-29 08:29:27Z

0

padding: 0 10 isn't valid (use a validator) so browsers are required to ignore it.

Lengths, other than zero, must have units (such as px or em).

You shouldn't be able to tell this though, since display: none hides everything.

answered Apr 29, 2013 at 8:29

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

2 Comments

Andrew Over a year ago

display; is just a popup -- please check the fiddle. I try to show it in different colors, but it does not show.

Quentin Over a year ago

please check the fiddle — Please read Something on my web site doesn't work. Can I just paste a link to it? and include a complete question on StackOverflow, preferably one that works as a reduced test case - unless the display: none is having an impact on the problem, don't include it.

Terry · Accepted Answer · 2013-04-29 08:39:51Z

Your class displaybox is set on display: none, which basically hides the entire container.

On another note, you use classes parent-child, but your children aren't nested properly into their parents. You need to put them before the end </div> tags so they be a part of that container.

I edited your fiddle and this should work now: http://jsfiddle.net/8PWNw/

This is what I changed:

I removed the display:none so your displaybox is shown again. I then changed some CSS:

Changed this, because your syntax didn't work before. The "." indicates you're addressing a class, in this case class displaybox with a child class parent, and you want to address all a elements in that class.

.displaybox .parent a
{
    color: black; 
}

I also added this one so you're links are showing as white:

.child a 
{
    color: white;
}

With those changes, you should be able to get it working like you want.

Collectives™ on Stack Overflow

Nesting CSS issue

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related