css - has - Seleccione el elemento basado en la clase de niño

css selector previous element

Question

¿Hay alguna forma en CSS de seleccionar un elemento que tenga un subelemento con una clase dada?

Quiero aplicar un estilo a una lista <ul> que tiene <li> con una clase en particular.

Answer 1

Esto no es posible con css, ya que estás trabajando contra la cascada seleccionando un ancestro basado en un descendiente.

Lo mejor que puedo ofrecer y sugerir es un enfoque de jQuery:

$(document).ready(
  function() {
    $(''.givenClassName'').parent().addClass(''something'');
  }
);

Esto encuentra el elemento con el givenClassName y luego selecciona su elemento principal y agrega la clase something a ese elemento.

@Blaenk sugiere un enfoque alternativo, que es más versátil (su enfoque no requiere que el elemento ancestro sea el elemento primario del elemento que está seleccionando).

Obviamente, otras bibliotecas JS, y JS por sí mismas, pueden lograr el mismo efecto, aunque no puedo ofrecer un consejo en particular, ya que solo me estoy familiarizando con JS y principalmente con jQuery (por qué, sí, me avergüenzo de mí mismo). ...).

Answer 2

No. La CSS Cascade no permite este tipo de selector.

La mejor solución en este caso sería modificar el DOM con JavaScript o cambiar el HTML resultante para agregar clases a las etiquetas ul .

Answer 3

Por lo que sé, desafortunadamente esto no es posible con CSS.

Sin embargo, si puedes usar Javascript, jQuery tiene una buena manera de hacerlo usando el método closest() . La documentation para ello incluso muestra un ejemplo muy similar al suyo: seleccionar una ul que tenga un li de una clase en particular.

$("li.some-class").closest("ul");

Perdóname si esta no es la mejor manera de hacerlo en jQuery. En realidad soy nuevo en jQuery y este es uno de los métodos que he aprendido hasta ahora, y me pareció apropiado.

Answer 4

ul li {
    /* styles */
}

¿Es esto lo que estás pidiendo?