¿Es posible seleccionar varios elementos que tienen un ancestro de una clase determinada, ID, etc en CSS? e.g:CSS seleccionar varios descendientes de otro elemento
table.exams caption, tbody, tfoot, thead, tr, th, td
Si no, ¿hay alguna manera de seleccionar todos los descendientes de ese elemento?
¿Es posible seleccionar varios elementos que tengan un antecesor de cierta clase, identificación, etc. en CSS?
Actualmente, no sin duplicar todo el selector ancestro y especificando todos los descendientes, por desgracia :
table.exams caption,
table.exams tbody,
table.exams tfoot,
table.exams thead,
table.exams tr,
table.exams th,
table.exams td
Fue sólo hasta tarde después de selectores 3 se están finalizando que proponen un pseudo -clase de clase para hacer esto, y fue solo recientemente que las implementaciones básicas comenzaron a aparecer. Ver this answer para una pequeña lección de historia.
En resumen, la pseudo-clase que está ahora entró en el estándar se conoce como :matches(). En un futuro lejano, una vez que los navegadores que empezar a aplicar :matches(), usted será capaz de hacer algo como esto:
table.exams :matches(caption, tbody, tfoot, thead, tr, th, td)
Si no, ¿hay una manera de seleccionar todos los descendientes de esa clase?
Bueno, sólo tiene que utilizar un asterisco *, lo que representa any element. Teniendo en cuenta que usted tiene th y td en su selector, es probable que el conjunto de los descendientes, más que todos los niños de table.exams, así que no use >, utilice un espacio en su lugar:
table.exams *
Pero, en realidad, evitar hacer esto . Si puede, haga todo lo posible para especificar qué tipo de descendientes está tratando de seleccionar.
Específicamente con mesas, puede salirse con la table.exams > :not(.colgroup), table.exams > * > tr > *, pero como se puede decir que esto es muy críptica (por no mencionar que se supone que tiene no hay script-supporting elements o anidadas tablas dentro de esta tabla) y Será mejor que solo enumeres todos los descendientes que quieras explícitamente.
el selector de los niños se ve así:
ul > li {
}
este se dirigirá a toda la li que son hijos directos de ul
si quiere dirigirse a todos los descendientes, utilice el selector *
¡Aunque no estoy seguro de haber entendido la primera parte de tu pregunta!
¿Es posible seleccionar varias etiquetas que tienen un antecesor de una cierta clase en CSS?
Es posible utilizar SCSS para lograr un resultado similar a: partidos, como se muestra en this article
También, algunos navegadores tienen soporte parcial para :matches con proveedor prefijo específico.
Recuerde que es ** altamente ** ineficiente. Cuando selecciona por primera vez ** todos ** los elementos en el DOM, y luego ** lo recorre hacia atrás ** hasta el elemento raíz para cada uno, buscando el elemento 'table'. –
¡Gran ayuda! Gracias. –