Select elements with CSS in a certain range, that is:
I have a table with their respective ones now I need that the tr that are from the fourth position to the ninth (9) are in red color, as I do?
Select elements with CSS in a certain range, that is:
I have a table with their respective ones now I need that the tr that are from the fourth position to the ninth (9) are in red color, as I do?
table tr:nth-child(n+4):nth-child(-n+9) {
color: red;
}
<table>
<tr>
<td>Prueba</td>
<td>Prueba</td>
<td>Prueba</td>
</tr>
<tr>
<td>Prueba</td>
<td>Prueba</td>
<td>Prueba</td>
</tr>
<tr>
<td>Prueba</td>
<td>Prueba</td>
<td>Prueba</td>
</tr>
<tr>
<td>Prueba</td>
<td>Prueba</td>
<td>Prueba</td>
</tr>
<tr>
<td>Prueba</td>
<td>Prueba</td>
<td>Prueba</td>
</tr>
<tr>
<td>Prueba</td>
<td>Prueba</td>
<td>Prueba</td>
</tr>
<tr>
<td>Prueba</td>
<td>Prueba</td>
<td>Prueba</td>
</tr>
<tr>
<td>Prueba</td>
<td>Prueba</td>
<td>Prueba</td>
</tr>
<tr>
<td>Prueba</td>
<td>Prueba</td>
<td>Prueba</td>
</tr>
<tr>
<td>Prueba</td>
<td>Prueba</td>
<td>Prueba</td>
</tr>
</table>
Using CSS , using nth-child(n)
, you can choose which children you want to be affected by a set of CSS rules, selected by their position within the DOM. p>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>gt demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<table border="1">
<?php
for ($i=1; $i < 11; $i++) {
echo '<tr><td> INICIO - '.$i.' </td><td> INICIO - '.$i.' </td><td> INICIO - '.$i.' </td></tr>';
echo '<tr><td> '.$i.' </td><td> '.$i.' </td><td> '.$i.' </td></tr>';
echo '<tr><td> '.$i.' </td><td> '.$i.' </td><td> '.$i.' </td></tr>';
echo '<tr><td> '.$i.' </td><td> '.$i.' </td><td> '.$i.' </td></tr>';
echo '<tr><td> '.$i.' </td><td> '.$i.' </td><td> '.$i.' </td></tr>';
echo '<tr><td> '.$i.' </td><td> '.$i.' </td><td> '.$i.' </td></tr>';
echo '<tr><td> '.$i.' </td><td> '.$i.' </td><td> '.$i.' </td></tr>';
echo '<tr><td> '.$i.' </td><td> '.$i.' </td><td> '.$i.' </td></tr>';
echo '<tr><td> '.$i.' </td><td> '.$i.' </td><td> '.$i.' </td></tr>';
echo '<tr><td> FIN - '.$i.' </td><td> FIN - '.$i.' </td><td> FIN - '.$i.' </td></tr>';
}
?>
</table>
<script>
limit = 10;
page = 11;
element = 'tr';
page = page<2?1:page;
from = (page>1)?(((page*limit)-limit)-1):false;
gt = (page>1)?':gt('+from+')':'';
selector = gt+':lt('+limit+')';
list = $(element+selector);
$(element).not(selector).css( "display", "none" );
console.log((list.length>0)?'Se estan mostrando los resultados de la pagina '+page:'No hay resultados de esta pagina.')
</script>
</body>
</html>
you can use this:
/* evitamos que el primer elemento cambie de color */
tr:nth-child(1) {
background: white;
}
/* coloreamos elementos de 1 en 1 desde el 4 elemento */
tr:nth-child(1n+4) {
background: red;
}
/* y sobre escribimos la regla a partir del 9 */
tr:nth-child(1n+9) {
background: white;
}
<table>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>