css – Tree comments – color in one row

Question:

Drupal generates tree comments in a similar way. Chet has not yet figured out how to paint every second comment in the tree in a different color, like a zebra.

That is, comment 3 and comment 5 must have a different background.

Updated : added a comment structure to make everyone understand. Let the first level be transparent, then all the others through one – in a different color (zebra – transparent, color, transparent, color).

.indented {
  margin-left: 65px;
}
div .comment {
  background-color: #eee;
  padding: 10px;
  margin: 5px;
}
	<div class="comment">comment 1</div>
	<div class="indented">
		<div class="comment">comment 2</div>
		<div class="indented">
			<div class="comment">comment 3</div>
			<div class="indented">
				<div class="comment">comment 4</div>
				<div class="indented">
					<div class="comment">comment 5</div>
				</div>
			</div>
		</div>
	</div>

	<div class="comment">comment 1</div>
	<div class="indented">
		<div class="comment">comment 2</div>
		<div class="indented">
			<div class="comment">comment 3</div>
			<div class="indented">
				<div class="comment">comment 4</div>
				<div class="indented">
					<div class="comment">comment 5</div>
				</div>
			</div>
		</div>
		<div class="comment">comment 2</div>
		<div class="indented">
			<div class="comment">comment 3</div>
			<div class="indented">
				<div class="comment">comment 4</div>
				<div class="indented">
					<div class="comment">comment 5</div>
				</div>
			</div>
		</div>
	</div>

Answer:

If the nesting of comments is small, then you can do this:

.indented {
  margin-left: 65px;
}
.comment {
  padding: 10px;
  margin: 5px;
}
.container >.indented >.comment,
.container >.indented >.indented >.indented >.comment,
.container >.indented >.indented >.indented >.indented >.indented >.comment,
.container >.indented >.indented >.indented >.indented >.indented >.indented >.indented >.comment {
  background-color: #eee;
}
<div class="container">
  <div class="comment">comment 1</div>
	<div class="indented">
		<div class="comment">comment 2</div>
		<div class="indented">
			<div class="comment">comment 3</div>
			<div class="indented">
				<div class="comment">comment 4</div>
				<div class="indented">
					<div class="comment">comment 5</div>
				</div>
			</div>
		</div>
	</div>

	<div class="comment">comment 1</div>
	<div class="indented">
		<div class="comment">comment 2</div>
		<div class="indented">
			<div class="comment">comment 3</div>
			<div class="indented">
				<div class="comment">comment 4</div>
				<div class="indented">
					<div class="comment">comment 5</div>
				</div>
			</div>
		</div>
    
		<div class="comment">comment 2</div>
		<div class="indented">
			<div class="comment">comment 3</div>
			<div class="indented">
				<div class="comment">comment 4</div>
				<div class="indented">
					<div class="comment">comment 5</div>
				</div>
			</div>
		</div>
	</div>
</div>
Scroll to Top