0

Hello I want to target the second and fourth and so on of a div that have the same class.

I want to make the "some content" div's that have content class to be red. how I do that? thank you

<div class="container">
  <div class="content">Some Content 1</div>
  <div class="description">description</div>
  <p>lorem ipsum betta</p>
</div>
<div class="container">
  <div class="content">Some Content 2</div>
  <div class="description">description</div>
  <p>lorem ipsum betta</p>
</div>
<div class="container">
  <div class="content">Some Content 3</div>
  <div class="description">description</div>
  <p>lorem ipsum betta</p>
</div>
<div class="container">
  <div class="content">Some Content 4</div>
  <div class="description">description</div>
  <p>lorem ipsum betta</p>
</div>
JoJo
  • 43
  • 6

1 Answers1

0

Your question confused me slightly and I'm unsure whether you want to target every 2nd, 4th, etc containers, or the children of containers. For the purpose of the below, I'm assuming the former. You can use the nth-child selector to achieve this, here's an example: https://jsfiddle.net/0s3k3s39/

.container:nth-child(even) {
  border: 1px solid red;
}

As you can see, it selects the even numbered containers only in this case.

Edit - further to OP's comment, try the following:

.container > .content:nth-child(even) {
  border: 1px solid red;
}

Edit 2: if you meant every 2nd containers div.content, try this:

.container:nth-child(even) > .content {
  border: 1px solid red;
}
David Wilkinson
  • 5,060
  • 1
  • 18
  • 32