Take first and last line element

Asked

Viewed 1,143 times

1

I have a read 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 pick up 1 after the first item where it is written?

 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

2 answers

1

Try to use the :nth-child thus:

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>

  • These LI’s can be registered, that is, they can have millions of li’s. .

  • What is the default ? if you want a yes/another you cannot use ul li:nth-child(2n){&#xA; color: red;&#xA;} &#xA;

  • If you do not have a certain pattern and only there is a marking in the text indicating that it should have such a configuration I believe you will have to check the value with javascript and add the css

1


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>

  • Thanks, it worked!!

Browser other questions tagged html css css3 css-hover

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