Aplicar estilos CSS a un elemento según sus elementos secundarios [duplicado]
¿Es posible definir un estilo CSS para un elemento, que solo se aplica si el elemento coincidente contiene un elemento específico (como elemento secundario directo)?
Creo que esto se explica mejor con un ejemplo.
Nota : Estoy intentando diseñar el elemento principal , dependiendo de los elementos secundarios que contiene.
<style>
/* note this is invalid syntax. I'm using the non-existing
":containing" pseudo-class to show what I want to achieve. */
div:containing div.a { border: solid 3px red; }
div:containing div.b { border: solid 3px blue; }
</style>
<!-- the following div should have a red border because
if contains a div with class="a" -->
<div>
<div class="a"></div>
</div>
<!-- the following div should have a blue border -->
<div>
<div class="b"></div>
</div>
Nota 2 : Sé que puedo lograr esto usando javascript, pero me preguntaba si esto es posible usando algunas características CSS desconocidas (para mí).
La sintaxis para eso es:
div:has(div.a) { border: solid 3px red; }
div:has(div.b) { border: solid 3px blue; }
Hasta donde yo sé, diseñar un elemento principal en función del elemento secundario no es una característica disponible de CSS. Probablemente necesitarás secuencias de comandos para esto.
Sería maravilloso si pudieras hacer algo como div[div.a]o div:containing[div.a]como dijiste, pero esto no es posible.
Quizás quieras considerar mirar jQuery . Sus selectores funcionan muy bien con tipos "que contienen". Puede seleccionar el div en función de su contenido secundario y luego aplicar una clase CSS al padre, todo en una línea.
Si usa jQuery, algo como esto podría funcionar (no probado, pero la teoría está ahí):
$('div:has(div.a)').css('border', '1px solid red');
o
$('div:has(div.a)').addClass('redBorder');
combinado con una clase CSS:
.redBorder
{
border: 1px solid red;
}
Aquí está la documentación para el selector "has" de jQuery .
Básicamente, no. Lo siguiente sería lo que buscabas en teoría:
div.a < div { border: solid 3px red; }
Lamentablemente no existe.
Hay algunos artículos del tipo "¿por qué diablos no?". Uno bien desarrollado por Shaun Inman es bastante bueno:
http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors
Actualizar. Muchos años después, ha llegado: la compatibilidad con los navegadores está aumentando.
https://developer.mozilla.org/en-US/docs/Web/CSS/:has
12 años es mucho tiempo.
Además de la respuesta de @kp:
Estoy lidiando con esto y, en mi caso, tengo que mostrar un elemento secundario y corregir la altura del objeto principal en consecuencia (el tamaño automático no funciona en un encabezado de arranque por alguna razón, no tengo tiempo para depurar) .
Pero en lugar de usar javascript para modificar el padre, creo que agregaré dinámicamente una clase CSS al padre y mostraré CSS selectivamente a los hijos en consecuencia. Esto mantendrá las decisiones en la lógica y no en función de un estado de CSS.
tl;dr; aplique los estilos ay bal padre <div>, no al hijo (por supuesto, no todos podrán hacer esto, es decir, los componentes angulares toman sus propias decisiones).
<style>
.parent { height: 50px; }
.parent div { display: none; }
.with-children { height: 100px; }
.with-children div { display: block; }
</style>
<div class="parent">
<div>child</div>
</div>
<script>
// to show the children
$('.parent').addClass('with-children');
</script>
