Nth child selector to alternate colors

[johndove]

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?

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]

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]

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]

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]

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]

Well, .children li {list-style: none;} is working for me.

[johndove]

Thank you!