Get first line element and last

Question

Get first line element and last

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I have a li and wanted to get the elements that are written MARKED below. But I used the nth-of-type, it works to get the 4 element always, but I could not get the next one. Could someone help me to always get 1 after the first item where it is marked marked?

 ul li&:nth-of-type(1){color: red;}
 ul li&:nth-of-type(4n){color: red;}

<ul>   
  <li class="col-sm-3">number MARCADO</li>
   <li class="col-sm-3">number</li>
   <li class="col-sm-3">number</li>
   <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number MARCADO</li>
   <li class="col-sm-3">number</li>
   <li class="col-sm-3">number</li>
   <li class="col-sm-3">number</li>
  <li class="col-sm-3">number MARCADO</li>
   <li class="col-sm-3">number MARCADO</li>
   <li class="col-sm-3">number</li>
   <li class="col-sm-3">number</li>
  <li class="col-sm-3">number</li>
   <li class="col-sm-3">number MARCADO</li>
   <li class="col-sm-3">number MARCADO</li>
   <li class="col-sm-3">number</li>
  </ul>

html css css3 css-hover

asked by anonymous 03.02.2016 / 18:14

2 answers

1

Try to use :nth-child like this:

ul li:nth-child(1) {
  color: red;
}
ul li:nth-child(4) {
  color: red;
}
ul li:nth-child(5) {
  color: red;
}
ul li:nth-child(9) {
  color: red;
}
ul li:nth-child(10) {
  color: red;
}
ul li:nth-child(14) {
  color: red;
}
ul li:nth-child(15) {
  color: red;
}

<ul>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number</li>
</ul>

03.02.2016 / 18:27

section does not work correctly How to reduce the INSERT script in DB with PDO - bindValue?

score 1 · Accepted Answer

For your case, you need to pick every 5 elements, not every 4 elements, this way you will also make a selector for the previous element (5n - 1)

ul li:nth-of-type(1){color: red;}
ul li:nth-of-type(5n - 1){color: red;}
ul li:nth-of-type(5n){color: red;}

<ul>   
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number</li>
</ul>