Always get the second read

Asked

Viewed 138 times

1

Guys, I have some columns, made with ul li

<ul>
   <li>1</li>
   <li>2</li>
   <li>1</li>
   <li>2</li>
   <li>1</li>
   <li>2</li>
   <li>1</li>
   <li>2</li>
   <li>1</li>
   <li>2</li>
   <li>1</li>
   <li>2</li>
</ul>

Which will look like this in case, 2-in-2

[1] [2]
[1] [2]
[1] [2]
[1] [2]
[1] [2]
[1] [2]

I wanted to give a margin-left of 15px but I just wanted that margin-left in column 2, that is, everyone who is in the right-hand column >>> has a margin-left.

I tried with Nth-Child but it didn’t work out so well.

Would anyone know any way to do that?

css

  • With the nth-child you did li:nth-child(even)?

  • I tried with li:Nth-Child(2n) but sometimes it gives the margin in the left column <<

1 answer

3


Just apply the style using the selector nth-child(even) to select all even index elements (or odd for the odd).

Take an example:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  float: left;
  width: 40%;
  margin-bottom: 5px;
}

li:nth-child(odd) {
  background: green;
}

li:nth-child(even) {
  background: blue;
  margin-left: 5px;
}
<ul>
   <li>1</li>
   <li>2</li>
   <li>1</li>
   <li>2</li>
   <li>1</li>
   <li>2</li>
   <li>1</li>
   <li>2</li>
   <li>1</li>
   <li>2</li>
   <li>1</li>
   <li>2</li>
</ul>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.