seleccione varios niños en css [closed]

12 minutos de lectura

Avatar de usuario de Manoz
manoz

Estoy tratando de aplicar la clase de puntos suspensivos en css para una tabla. Entonces, algunas columnas necesitan tener esta clase de puntos suspensivos. Tengo varias columnas en una tabla.

estoy haciendo esto por nth-child propiedad en css, ¿hay alguna otra forma de seleccionar varios niños al azar?

Lo intenté-

.ListTaskTime tbody tr >td:nth-child(3) a
{
      text-overflow: ellipsis;
    width:150px;
    display: block;
    overflow: hidden;
    word-break:keep-all;
    zoom:normal;
    line-break:normal;
    white-space:pre;
}

Aunque la misma tabla tiene una columna más 5th-childahora para este niño necesito hacer una clase separada, por lo tanto, para otras columnas.

No quiero expandir mi código css. hay alguna otra solucion?

  • Para tu información, puedes/debes acortar tu selector a .ListTaskTime td:nth-child(N) (bueno, una lista de ellos separados por una coma, como se indica en las 2 primeras respuestas) a menos que tenga problemas de especificidad

    – FelipeAls

    4 de mayo de 2013 a las 7:35

  • @FelipeAls De lo que le sugeriría que use nth-of-type en ese caso

    – Sr. Alien

    4 de mayo de 2013 a las 7:36

  • @Mr.Alien No conocemos la estructura de las filas (¿hay th en las primeras columnas o no?) pero eso es muy manejable en listas y tablas. Aunque la diferencia que trae :nth-of-type es bienvenido en contenido como p, hN, (sección, div, artículo), lista de clases repetidas, etc.

    – FelipeAls

    4 de mayo de 2013 a las 7:38

  • ¿Estás realmente tratando de seleccionar aleatorio ¿niños? CSS no tiene concepto de aleatoriedad. Esta pregunta es realmente poco clara; todas las respuestas hasta ahora han elegido arbitrario niños, no aleatorio niños.

    – TylerH

    18 de septiembre de 2020 a las 18:48

Avatar de usuario de Mr. Alien
Sr. alienígena

Puedes separar las clases con una coma. ,

.ListTaskTime tbody tr >td:nth-child(3), 
.ListTaskTime tbody tr >td:nth-child(6),
.ListTaskTime tbody tr >td:nth-child(9) {
    /* Common Styles Goes Here, Styles will apply to child 3,6 and 9 */
}

Nota: Es necesario comprobar el nth-child y defínalo manualmente en su hoja de estilo, ya que CSS no puede decidir por usted si aumentan las columnas.

Si está utilizando un lenguaje del lado del servidor para generar una tabla dinámica, puede usar funciones como substr() para cortar las letras.

Nota al margen: no tiene que usar > a menos y hasta que no tenga ninguna tabla secundaria, esto es suficiente. tbody tr td:nth-child(3)

  • ¿Hay alguna forma de definir todos estos 3 niños (3,6,9) de una sola vez sin escribir toda la jerarquía ya que todos los niños son hermanos y pertenecen al mismo padre que tiene la misma relación?

    – bansal

    12 de junio de 2018 a las 6:17

  • Para el enlace muy útil del buscador futuro para selecciones tan específicas: css-tricks.com/useful-nth-child-recipies

    – Tushar Kshirsagar

    30 de marzo de 2020 a las 10:01

  • También puede usar el selector :is. .ListTaskTime tbody tr >td:is(:nth-child(3), :nth-child(6), :nth-child(9))

    – Cj Bello

    16 de mayo a las 12:04

Avatar de usuario de Levi Uzodike
levi uzodike

Si entiendo el problema correctamente, está buscando una forma de seleccionar solo la tercera y la quinta columna. Aquí hay una manera: td:nth-child(-2n+5):not(:first-child) o td:nth-child(-2n+5):nth-child(n+3)

(No estoy seguro de si usar ‘selectores anidados'[I just made this term up and am unsure if it is real] es decir :not(:first-child) es más rápido que usar notación funcional, es decir :nth-child(n+3) O no[my guess is yes, since the latter seems to involve extra iteration; see below in the long-winded explanation])

Referencia (Desplácese a la sección “Ejemplos” para ver todas las posibilidades y más abajo a la sección “Compatibilidad del navegador” para, lo adivinó, la compatibilidad del navegador)

Aquí hay una explicación larga:

Tuve que editar esta explicación una vez más principalmente porque todo el concepto de ‘hasta el último’ (por ejemplo, comenzando en el 3er hasta el último niño) es una tontería. La notación funcional no tiene en cuenta el total de elementos secundarios, por lo que no se puede considerar como una selección inicial desde el final del grupo de elementos secundarios.

El método que @Turnerj mencionó en su respuesta y que @bansal estaba buscando y que resuelve la pregunta original se describe en la referencia como “Notación funcional”.

An+B Representa elementos cuya posición numérica en una serie de hermanos coincide con el patrón An+B, para cada entero positivo o valor cero de n. El índice del primer elemento es 1. Los valores A y B deben ser números enteros.

Por ejemplo, si desea que el niño 3 llegue al último niño, podría hacer :nth-child(n+3). (A=1; B=3) Como dice la cita, n siempre comienza desde 0. Digamos que hay 5 niños, por ejemplo. Esto te da:

  • niño 3(0+3)
  • niño 4(1+3)
  • niño 5(2+3)

3+3 dará como resultado el hijo 6 que no existe. Y dado que n comienza en 0 y no se vuelve negativo, no hay forma de seleccionar el niño 2 o 1.

También puede llevar al niño 3 al principio haciendo :nth-child(-n+3). (A=-1; B=3)

  • hijo 3(-1*0 + 3)
  • hijo 2(-1*1 + 3)
  • hijo 1(-1*2 + 3)
  • sin hijo: 0=(-1*3 + 3)

La siguiente sección se puede omitir para evitar confusiones. Se ha dejado aquí para cualquiera que haya leído la tontería sin corregir antes, para que pueda “desaprender” cualquier falsedad que haya aceptado como verdadera.

INICIO DE BALONEY TRAMO “HASTA EL ÚLTIMO”[HAS BEEN CORRECTED]


Si desea que cada 4.° niño, comenzando desde el 3.° hasta el último, retroceda en un grupo de 15 niños, :nth-child(4n-3). (A=4; B=-3) En realidad, ir hacia atrás debería hacer A = -4, y también, no puedes hacer “to last”, pero en este caso especial funciona Siguiendo la misma lógica que antes:

  • sin hijo: -3=(4*0 – 3)
  • niño 1(4*1 – 3)
  • niño 5(4*2 – 3)
  • niño 9(4*3 – 3)
  • niño 13(4*4 – 3)

Aunque vayas hacia atrás, A[the coefficient of n] se mantiene positivo porque B es negativo, lo que se puede considerar que comienza en -3 (del 3 al último).

Esto de “hasta el final” solo funciona cuando T % A = A - 1dónde T es el número total de hijos. Esto funciona para que el Tel niño, por así decirlo, puede ser referido como -1 en términos de A, Si eso tiene sentido. En este ejemplo, donde T es 15 y A es 4, 15 % 4 = 3 = 4 - 1, por lo que funciona. Explicación adicional: si estuviéramos contando en “hasta el final” en términos de 4, por así decirlo,

-3 -2 -1 0 |-3 -2 -1 0|-3 -2 -1 0 |-3 -2 -1“hasta el final” en 4

-15 -14 -13 -12|-11 -10 -9 -8|-7 -6 -5 -4 |-3 -2 -1“durar”

1 2 3 4 | 5 6 7 8| 9 10 11 12| 13 14 15Regular

1 2 3 4 | 1 2 3 4| 1 2 3 4 | 1 2 3en 4

15 termina siendo correctamente referido como -1 o último y 14 como -2 o penúltimo y 13 como -3 o penúltimo, etc.

Pero, ¿funcionaría si el número total de niños T tenias 16? Por la fórmula dada, T % A = A - 1 [16 % 4 = 0 ≠ 4 - 1], no debemos esperar que funcione. nos gustaría 16 ser – estar -1 y 15 ser – estar -2pero no lo son. Para los curiosos, el pensamiento “hasta el final” solo funciona para T=15 cuando A=1,2,4,8(factores de 16(T+1); por T=16ya que T+1=17 es un número primo, sólo A=1 deja que el pensamiento “hasta el final” funcione

Si las cosas “hasta el final” siempre funcionó, esperábamos :nth-child(4n-3) (A=4; B=-3) con T = 16 en lugar de 15, para significar ir en múltiplos de 4 desde el 3er hasta el último número. Y esperaríamos del tercero al último número, 14para estar en la secuencia, pero esto es lo que realmente sucede:

  • sin hijo: -3=(4*0 – 3)
  • niño 1(4*1 – 3)
  • niño 5(4*2 – 3)
  • niño 9(4*3 – 3)
  • niño 13(4*4 – 3)

TIENES LOS MISMOS NIÑOS[CHILDREN]:). Como ve, los mismos niños se producen debido a la relación entre A y B. TEl único rol de es determinar el límite (la secuencia podría incluir al hijo número 17, pero T=16).

Ok, de vuelta al texto original hablando de T = 15

Si el coeficiente fuera negativo, descendería a los negativos y nunca obtendría un número positivo (que es donde están los niños). En otras palabras, A<0; B<0 no da hijos.

En el mismo escenario, el mismo resultado también podría lograrse mediante

  • :nth-child(-4n+13)(cada 4to niño yendo hacia atrás a partir del 13er niño)
  • :nth-child(4n+1)(cada 4to niño a partir del 1er niño)
  • :nth-child(4n-15)(cada 4to niño a partir del 15 hasta el último hijocuando B es negativo, no se puede pensar en términos de comenzar desde el Bth al último niño, como se explicó anteriormente)

Darse cuenta de :nth-child(4n+5) excluirá al niño 1 porque n no puede ser negativo. Para obtener todos los niños en la secuencia (1,5,9,13 en este ejemplo), con B siendo positivo, el patrón debe comenzar en uno de los extremos de la secuencia (1 o 13 en este ejemplo). Cualquier patrón que comience en el 9 o el 5 excluirá otros números. NO volverá al principio como módulo (%). Pero si B es negativo (-7 o -11 para el 9 y 5, respectivamente o cualquier otro número negativo que sea menor por un múltiplo de 4, en este ejemplo), siempre obtendrá todos los hijos en la secuencia sin importar dónde comience, asumiendo, como se mencionó anteriormente, que A[coefficient of n] se mantiene positivo.


FIN DE LA SECCIÓN “AL ÚLTIMO” DEL BALONEY[HAS BEEN CORRECTED]

Tu puedes hacer :nth-child(odd)(:nth-child(2n+1)) y :nth-child(even)(:nth-child(2n)), pero el que más me interesaba era obtener los rangos internos. Esto se hace simplemente tomando la intersección de dos :nth-child()‘s.

Por ejemplo, si desea solo la columna 3 y 5, en una tabla con 490 columnas (no importa el problema, solo lo elegí porque es cuantas veces debemos perdonar a cada persona por dia)

  • td:nth-child(-n+5) le da niño 1-5 o niño ≤ 5
  • td:nth-child(n+3) le da niño 3-490 o niño ≥ 3
  • td:nth-child(odd) te da creo que lo entiendes

Así que todos juntos eso es: td:nth-child(-n+5):nth-child(n+3):nth-child(odd). (Las columnas que son menores que 5 Y mayores que 3 Y impares[this takes out child #4].)

Lo puse en este orden para minimizar la cantidad de resultados que crearía cada selector para el siguiente. Si pones td:nth-child(n+3) primero, obtendría los mismos resultados finales, pero pasaría al niño 3-490 al siguiente selector en lugar de simplemente pasar al niño 1-5. Esto probablemente hace un aumento insignificante en el rendimiento, pero tal vez podría ser útil a escalas más grandes.

No estoy seguro de si esto último sobre el orden es realmente cómo funciona para cualquier navegador, o si los navegadores ya lo optimizan, pero ese fue solo mi proceso de pensamiento.

Al terminar de escribir todo esto, pensé en td:nth-child(-n+5):nth-child(2n+3). Entonces pensé en td:nth-child(-2n+5):nth-child(n+3) y edité nuevamente, pero ya había explicado la solución que tenía originalmente, así que no la borraré y volveré a explicar esta porque creo que esta última solución tiene sentido de todos los otros ejemplos dados. Solo diré que creo que el último es el mejor desde el primer selector de nth-child, es decir td:nth-child(-2n+5) pasa solo 3 tds al 2º selector en lugar del 5 tdes eso td:nth-child(-n+5) pasaría

Avatar de usuario de Turnerj
Turnerj

Esto debería hacerlo:

.ListTaskTime tbody tr > td:nth-child(3) a,
.ListTaskTime tbody tr > td:nth-child(5) a
{
    text-overflow: ellipsis;
    width:150px;
    display: block;
    overflow: hidden;
    word-break:keep-all;
    zoom:normal;
    line-break:normal;
    white-space:pre;
}

El uso de una coma entre un selector como este le permite tener varios selectores con el mismo estilo declarado. Puede tener tantos selectores separados por comas como desee para permitir que más elementos usen el mismo estilo.

Podría agregar eso a menos que tenga un estilo conflictivo en la página, usando .ListTaskTime tbody tr > td:nth-child(3) a es bastante específico y podría simplificarse a algo como .ListTaskTime td:nth-child(3) a.

También te puede interesar saber sobre :nth-child(even) y :nth-child(odd) o incluso más complejo nth-child pseudoselectores como :nth-child(2n+3) lo que puede ayudarlo si hay más columnas más adelante que se ajusten a un patrón para diseñar.

No estoy muy seguro de lo que quiere decir con “aplicar clase seleccionando clase”, pero veo que básicamente le gustaría una cadena de selector CSS.

si, por esa columna del quinto hijo (?) que necesita una clase diferente, se refiere a todos los demás, pero ese hijo en la tabla tiene la propiedad de text-overflow: ellipsis en él, entonces esta sería una forma alternativa corta.

    .ListTaskTime td:not(:nth-of-type(5)) a{
        /*styles for ellipse goes here*/}
    .ListTaskTime td:nth-of-type(5) a{ 
        /*styles for not-ellipse goes here*/}

(cosa rara, si el objeto clasificado es un <p>esa cadena selectora en particular no funciona como un <div> lo hace..)

También se podría usar tr>:nth-child() para apuntar también a todos los objetos que comparten el mismo espacio que <td>. todos los demás bits meticulosos (consultas múltiples, etc.) han sido delineados cuidadosamente por otros. Lamento decir que cuando tiene dos formatos diferentes en una tabla, es prácticamente imposible especificarlos en un solo selector en css simple… ¿por ahora? 😉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1:nth-child(4n-3){
            color: red;
        }
    </style>
</head>
<body>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>
    <h1>Test</h1>

</body>
</html>

  • Aquí puedes echar un vistazo

    – Nain Abbas

    18 de septiembre de 2020 a las 15:17

  • Esto obtiene cada cuarto hijo (más el primero), no hijos al azar. ¡Arbitrario! = aleatorio

    – TylerH

    18 sep 2020 a las 18:50

  • Aquí puedes echar un vistazo

    – Nain Abbas

    18 de septiembre de 2020 a las 15:17

  • Esto obtiene cada cuarto hijo (más el primero), no hijos al azar. ¡Arbitrario! = aleatorio

    – TylerH

    18 sep 2020 a las 18:50

¿Ha sido útil esta solución?