...

View Full Version : Nth child selector to alternate colors



johndove
11-26-2012, 03:58 PM
Please see url http://badidea.backstageweb.net/2012/11/who-am-i-who-am-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?


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

VIPStephan
11-26-2012, 05:47 PM
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:


.children li:nth-child(even) {…}

johndove
11-26-2012, 06:10 PM
Stephan, still not alternating ?


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;
}

VIPStephan
11-26-2012, 06:27 PM
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:


.children {[color 1]}
.children ul {[color 2]}
.children ul ul {[color 1]}
.children ul ul ul {[color 2]}

johndove
11-26-2012, 07:11 PM
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. - ?


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

VIPStephan
11-26-2012, 07:56 PM
Well, .children li {list-style: none;} is working for me.

johndove
11-26-2012, 08:00 PM
Thank you!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum