CSS selector by rank

0

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?

    
asked by Arcaela 09.11.2018 в 16:58
source

3 answers

1

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>     

answered by 09.11.2018 в 17:38
0
<!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>&nbsp;&nbsp;INICIO - '.$i.'&nbsp;&nbsp;</td><td>&nbsp;&nbsp;INICIO - '.$i.'&nbsp;&nbsp;</td><td>&nbsp;&nbsp;INICIO - '.$i.'&nbsp;&nbsp;</td></tr>';
        echo '<tr><td>&nbsp;&nbsp;'.$i.'&nbsp;&nbsp;</td><td>&nbsp;&nbsp;'.$i.'&nbsp;&nbsp;</td><td>&nbsp;&nbsp;'.$i.'&nbsp;&nbsp;</td></tr>';
        echo '<tr><td>&nbsp;&nbsp;'.$i.'&nbsp;&nbsp;</td><td>&nbsp;&nbsp;'.$i.'&nbsp;&nbsp;</td><td>&nbsp;&nbsp;'.$i.'&nbsp;&nbsp;</td></tr>';
        echo '<tr><td>&nbsp;&nbsp;'.$i.'&nbsp;&nbsp;</td><td>&nbsp;&nbsp;'.$i.'&nbsp;&nbsp;</td><td>&nbsp;&nbsp;'.$i.'&nbsp;&nbsp;</td></tr>';
        echo '<tr><td>&nbsp;&nbsp;'.$i.'&nbsp;&nbsp;</td><td>&nbsp;&nbsp;'.$i.'&nbsp;&nbsp;</td><td>&nbsp;&nbsp;'.$i.'&nbsp;&nbsp;</td></tr>';
        echo '<tr><td>&nbsp;&nbsp;'.$i.'&nbsp;&nbsp;</td><td>&nbsp;&nbsp;'.$i.'&nbsp;&nbsp;</td><td>&nbsp;&nbsp;'.$i.'&nbsp;&nbsp;</td></tr>';
        echo '<tr><td>&nbsp;&nbsp;'.$i.'&nbsp;&nbsp;</td><td>&nbsp;&nbsp;'.$i.'&nbsp;&nbsp;</td><td>&nbsp;&nbsp;'.$i.'&nbsp;&nbsp;</td></tr>';
        echo '<tr><td>&nbsp;&nbsp;'.$i.'&nbsp;&nbsp;</td><td>&nbsp;&nbsp;'.$i.'&nbsp;&nbsp;</td><td>&nbsp;&nbsp;'.$i.'&nbsp;&nbsp;</td></tr>';
        echo '<tr><td>&nbsp;&nbsp;'.$i.'&nbsp;&nbsp;</td><td>&nbsp;&nbsp;'.$i.'&nbsp;&nbsp;</td><td>&nbsp;&nbsp;'.$i.'&nbsp;&nbsp;</td></tr>';
        echo '<tr><td>&nbsp;&nbsp;FIN - '.$i.'&nbsp;&nbsp;</td><td>&nbsp;&nbsp;FIN - '.$i.'&nbsp;&nbsp;</td><td>&nbsp;&nbsp;FIN - '.$i.'&nbsp;&nbsp;</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>
    
answered by 09.11.2018 в 17:43
0

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>
    
answered by 09.11.2018 в 17:43