Cómo usar el selector CSS para eliminar el elemento si contiene un tipo específico de elemento secundario -- html campo con css camp Relacionados El problema

How to use CSS selector to eliminate element if it contains specific type of child element


3
vote

problema

Español

Déjame dar un ejemplo para aclarar mi pregunta.

Supongamos que tengo una mesa a continuación:

  <table>    <tr>      <th>header1</th>      <th>header2</th>    </tr>      <tr>      <td>elem1</td>      <td>elem2</td>    </tr>      <tr>      <td>elem3</td>      <td>elem4</td>    </tr>  </table>  

Quiero mostrar que la fila de la tabla que contiene <td>1 se hace clic, por lo que estoy tratando de cambiar el cursor del puntero del mouse a la mano cuando se cierne en <tr> que contiene <td> Elemento.

Puedo hacerlo al configurar el estilo a continuación:

  table tr:not(:first-child) {cursor:pointer;}   

El primer hijo de una tabla es normalmente el <tr> que contiene <th>6 .

Aquí viene la pregunta, cómo escribir el estilo CSS para eliminar <tr> que contiene <th> como niño directo con una manera más intuitiva?

Original en ingles

Let me give an example to clarify my question.

Assume I have a table like below:

<table>    <tr>      <th>header1</th>      <th>header2</th>    </tr>      <tr>      <td>elem1</td>      <td>elem2</td>    </tr>      <tr>      <td>elem3</td>      <td>elem4</td>    </tr>  </table>

I want to show that table row containing <td> element is clickable, so I'm trying to change the mouse pointer cursor to hand when it hovers on <tr> that contains <td> element.

I can do that by setting the style like below:

table tr:not(:first-child) {cursor:pointer;} 

The first child of a table is normally the <tr> that contains <th>.

Here comes the question, how to write the css style to eliminate <tr> that contains <th> as direct child with more intuitive way?

     
 
 

Lista de respuestas

3
 
vote
vote
La mejor respuesta
 

Hacer uso del elemento thead y tbody , y luego use CSS para apuntar solo a las filas en el tbody :

  table tbody tr {    cursor: pointer;  }  
  <table>    <thead>      <tr>        <th>header1</th>        <th>header2</th>      </tr>    </thead>    <tbody>      <tr>        <td>elem1</td>        <td>elem2</td>      </tr>      <tr>        <td>elem3</td>        <td>elem4</td>      </tr>    </tbody>  </table>  
 

Make use of the thead and tbody element, and then use CSS to only target the rows in the tbody:

table tbody tr {    cursor: pointer;  }
<table>    <thead>      <tr>        <th>header1</th>        <th>header2</th>      </tr>    </thead>    <tbody>      <tr>        <td>elem1</td>        <td>elem2</td>      </tr>      <tr>        <td>elem3</td>        <td>elem4</td>      </tr>    </tbody>  </table>
 
 
3
 
vote

tr td {cursor: pointer} Hará bien:

  tr td {cursor: pointer}  
  <table>    <tr>      <th>header1      <th>header2    </tr>    <tr>      <td>elem1      <td>elem2    </tr>    <tr>      <td>elem3      <td>elem4    </tr>  </table>  

o simplemente $fnames = explode( '|', $uvustate['fname'] ); $lnames = explode( '|', $uvustate['lname'] ); $resultnames = array_combine($fnames, $lnames); ksort($resultnames); echo "<ul>"; foreach ($resultnames as $fkey => $lkey) { echo "<li>" . $fkey . " " . substr($lkey,0,1) . ".</li>"; } echo "</ul>"; 0 también está bien.

 

tr td {cursor: pointer} will do just fine:

tr td {cursor: pointer}
<table>    <tr>      <th>header1      <th>header2    </tr>    <tr>      <td>elem1      <td>elem2    </tr>    <tr>      <td>elem3      <td>elem4    </tr>  </table>

Or just td {cursor: pointer} is fine too.

 
 
 
 
1
 
vote

También puede usar CSS Pseudo-Class:

Seleccionará de la segunda fila en su tabla.

  $fnames = explode( '|', $uvustate['fname'] ); $lnames = explode( '|', $uvustate['lname'] ); $resultnames = array_combine($fnames, $lnames); ksort($resultnames);  echo "<ul>"; foreach ($resultnames as $fkey => $lkey) {     echo "<li>" . $fkey . " " . substr($lkey,0,1) . ".</li>"; } echo "</ul>"; 111   
  $fnames = explode( '|', $uvustate['fname'] ); $lnames = explode( '|', $uvustate['lname'] ); $resultnames = array_combine($fnames, $lnames); ksort($resultnames);  echo "<ul>"; foreach ($resultnames as $fkey => $lkey) {     echo "<li>" . $fkey . " " . substr($lkey,0,1) . ".</li>"; } echo "</ul>"; 2  
 

You may also use CSS pseudo-class:

It will select from 2nd to last row in your table.

table tr:nth-child(n+2) {     cursor: pointer;  }
<table>      <tr>       <th>header1</th>       <th>header2</th>     </tr>      <tr class="editable">       <td>elem1</td>       <td>elem2</td>     </tr>     <tr class="editable">       <td>elem3</td>       <td>elem4</td>     </tr>   </table>
 
 
 
 
1
 
vote

Puede agregar clase a su TR editable TR:

  $fnames = explode( '|', $uvustate['fname'] ); $lnames = explode( '|', $uvustate['lname'] ); $resultnames = array_combine($fnames, $lnames); ksort($resultnames);  echo "<ul>"; foreach ($resultnames as $fkey => $lkey) {     echo "<li>" . $fkey . " " . substr($lkey,0,1) . ".</li>"; } echo "</ul>"; 3  
  $fnames = explode( '|', $uvustate['fname'] ); $lnames = explode( '|', $uvustate['lname'] ); $resultnames = array_combine($fnames, $lnames); ksort($resultnames);  echo "<ul>"; foreach ($resultnames as $fkey => $lkey) {     echo "<li>" . $fkey . " " . substr($lkey,0,1) . ".</li>"; } echo "</ul>"; 4  
 

You can add class to your editable tr:

tr.editable {    cursor: pointer;  }
<table>      <tr>       <th>header1</th>       <th>header2</th>     </tr>      <tr class="editable">       <td>elem1</td>       <td>elem2</td>     </tr>     <tr class="editable">       <td>elem3</td>       <td>elem4</td>     </tr>   </table>
 
 
 
 
-3
 
vote

Simplemente podría referirse a todos $fnames = explode( '|', $uvustate['fname'] ); $lnames = explode( '|', $uvustate['lname'] ); $resultnames = array_combine($fnames, $lnames); ksort($resultnames); echo "<ul>"; foreach ($resultnames as $fkey => $lkey) { echo "<li>" . $fkey . " " . substr($lkey,0,1) . ".</li>"; } echo "</ul>"; 5 que tienen como su hijo $fnames = explode( '|', $uvustate['fname'] ); $lnames = explode( '|', $uvustate['lname'] ); $resultnames = array_combine($fnames, $lnames); ksort($resultnames); echo "<ul>"; foreach ($resultnames as $fkey => $lkey) { echo "<li>" . $fkey . " " . substr($lkey,0,1) . ".</li>"; } echo "</ul>"; 6616 omitirá automáticamente el $fnames = explode( '|', $uvustate['fname'] ); $lnames = explode( '|', $uvustate['lname'] ); $resultnames = array_combine($fnames, $lnames); ksort($resultnames); echo "<ul>"; foreach ($resultnames as $fkey => $lkey) { echo "<li>" . $fkey . " " . substr($lkey,0,1) . ".</li>"; } echo "</ul>"; 7 con $fnames = explode( '|', $uvustate['fname'] ); $lnames = explode( '|', $uvustate['lname'] ); $resultnames = array_combine($fnames, $lnames); ksort($resultnames); echo "<ul>"; foreach ($resultnames as $fkey => $lkey) { echo "<li>" . $fkey . " " . substr($lkey,0,1) . ".</li>"; } echo "</ul>"; 8 Etiquetas

  $fnames = explode( '|', $uvustate['fname'] ); $lnames = explode( '|', $uvustate['lname'] ); $resultnames = array_combine($fnames, $lnames); ksort($resultnames);  echo "<ul>"; foreach ($resultnames as $fkey => $lkey) {     echo "<li>" . $fkey . " " . substr($lkey,0,1) . ".</li>"; } echo "</ul>"; 9  
 

You could simply refer to all tr that have as their child <td> it will automatically omit the tr with <th> tags

 table tr td {     cursor:pointer;  } 
 
 
 
 

Relacionados problema

1  Directrices para diseñar HTML para una fácil personalización CSS  ( Guidelines for designing html for easy css customization ) 
Estoy haciendo un proyecto SAAS, y queremos que cada cliente pueda cargar una página CSS para "su" sitio web. (Aunque en realidad, todos los sitios del client...

76  Cómo romper la palabra después de un carácter especial como guiones (-)  ( How to break word after special character like hyphens ) 
Dado un CSS relativamente simple: div { width: 150px; } <div> 12333-2333-233-23339392-332332323 </div> ¿Cómo lo hago para que la cade...

142  ¿Cómo detectar cuál de las fuentes definidas se utilizó en una página web?  ( How to detect which one of the defined font was used in a web page ) 
Supongamos que tengo la siguiente regla de CSS en mi página: body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ¿Cómo podría detec...

5  Cómo alinear verticalmente una tabla en CSS  ( How to vertically align a table in css ) 
¿Cómo puedo alinear verticalmente una tabla en el centro de la pantalla con CSS? ...

0  Imagen de fondo Blurs en Firefox3  ( Background image blurs in firefox3 ) 
Cuando uso la imagen en mi página HTML usando la propiedad de fondo. Los loks están bien en IE, pero se ve borroso en Firefox. Wat podría ser la posible soluc...

0  LazyWeb: necesita Javascript que elimina los elementos de LI basados ​​en la clase visitada de un elemento  ( Lazyweb need javascript that removes li elements based on visited class of a el ) 
Tengo esta página que tiene muchos datos que no necesito, ya que ya he hecho clic en él, pero se repite a menudo, así que tengo que buscar visualmente el azul...

0  Deshacerse del disco en el artículo de la lista  ( Getting rid of disc in list item ) 
Estoy desarrollando un sitio usando jquery, y jquery ui Tabs. Por alguna razón, mis pestañas (lista desordenada) están mostrando sus balas en todos los navega...

8  Desapareciendo bordes de células de mesa CSS en navegadores basados ​​en gecko  ( Disappearing css table cell borders in gecko based browsers ) 
Tengo una construcción de tabla HTML muy específica que parece revelar un error de gecko. Aquí hay una versión destilada del problema. Observe la siguiente ...

303  ¿Por qué el ancho se colapsó en el elemento secundario del ancho porcentual en un padre absolutamente posicionado en Internet Explorer 7?  ( Why did the width collapse in the percentage width child element in an absolutel ) 
Tengo un double8 que contiene varios niños, uno de los cuales es un 99887776669 relativamente posicionado. Cuando uso un Form0 en el niño Form111111 , ...

4  Cuerda continua que no se envuelve en TD  ( Continuous string not getting wrapped in td ) 
Cuando coloco una larga cadena continua en mi ancho fijo TD, no se está envuelto. La cadena aumenta el ancho de mi mesa. ¿Alguien puede ayudarme con esto? P...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos