Always pick up the second li

Question

Always pick up the second li

Navigation

#1 by (3 votes)

1

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>

That will be like this in the case of 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 only wanted that margin-left in column 2, that is, all that is in the right column > > have a margin-left.

I tried it with nth-child but it did not work very well.

Would anyone know of any way to do this?

css

asked by anonymous 27.09.2017 / 22:16

1 answer

What is and how to use array_walk? Scrollbar showing alone

score 3 · Accepted Answer

Simply apply the style by using the nth-child(even) selector to select all elements of even (or odd pendent) indexes.

See 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>