Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts

    Nth child selector to alternate colors

    Please see url http://badidea.backstageweb.net/2012...-i/#comment-13 (responses)

    I am trying to use the nth selector to alternate colors (#fff and #F4FCEB) of every other response but I'm not having any success. Can anyone tell me what I'm doing wrong?

    Code:
    ul.children {
        background-color: #F4FCEB;
        box-shadow: 0 0 8px #888888 inset;
        list-style: none outside none;
        margin: 10px;
        padding: 12px;
    }
    
    ul.children:nth-child(2n) {
        background-color: #FFFFFF;
    }
    Thanks,

    John

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,678
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    It’s not the lists you should style but rather the list items because the lists aren’t repeating themselves, they will never be an alternate. Also, there are simple keywords for these cases:
    Code:
    .children li:nth-child(even) {…}

  • #3
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Stephan, still not alternating ?

    Code:
    ul.children{
    	background-color:#f4fceb;
    	margin:10px;
    	padding:12px;
    	list-style:none;
    	-moz-box-shadow: inset 0 0 8px #888;
    	-webkit-box-shadow: inset 0 0 8px#888;
    	box-shadow: inset 0 0 8px #888;
    	}
    	
    ul.children li:nth-child(even){	
    	background-color:#fff;
    	}

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,678
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    Ah, OK, I think I get it: You want each child of a list to be of the alternate color of the parent? For that the :nth-child pseudo-class doesn’t work. I don’t even know if there is any general selector for this but I don’t think so. You need to do it manually, like:
    Code:
    .children {[color 1]}
    .children ul {[color 2]}
    .children ul ul {[color 1]}
    .children ul ul ul {[color 2]}
    …

  • #5
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Stephan, thanks!

    Almost there, only trouble now is I have a list-style-type:circle on my original comment (10:27 a.m.) that I want off. Can't find the style. - ?

    Code:
    .children ul{
    	background-color:#fff;
    	margin:10px;
    	padding:12px;
    	list-style:none;
    	/*border:2px solid #C1E0FF;*/
    	-moz-box-shadow: inset 0 0 8px #888;
    	-webkit-box-shadow: inset 0 0 8px#888;
    	box-shadow: inset 0 0 8px #888;
    	list-style-type:none;
    	}
    	
    .children ul ul {background-color:#f4fceb;}
    .children ul ul ul {background-color:#fff;}
    .children ul ul ul ul {background-color:#f4fceb;}
    .children ul ul ul ul ul {background-color:#fff;}
    .children ul ul ul ul ul ul {background-color:#f4fceb;}
    .children ul ul ul ul ul ul ul {background-color:#fff;}
    
    li.comment-body {list-style-type:none;} (that's not it).

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,678
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    Well, .children li {list-style: none;} is working for me.

  • Users who have thanked VIPStephan for this post:

    johndove (11-26-2012)

  • #7
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Thank you!


  •  

    Tags for this Thread

    Posting Permissions

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