¿Hay un selector para excluir la visualización: ninguno de los elementos?

5 minutos de lectura

avatar de usuario de alex
Alex

solo quiero seleccionar <buttons> cuyos padres tienen display: block y excluir aquellos <buttons> cuyos padres tienen display:none.

¿Hay alguna forma de lograr esto?

  • Si el display: block y el display: none los padres son clases diferentes, luego puede seleccionar los botones en función de eso.

    – Jesse

    17 de octubre de 2017 a las 9:21

  • ¿Por qué quieres eso? Si un padre de elementos es display: none entonces simplemente no se renderizará. No importa qué otras propiedades se le apliquen.

    – Quintín

    17 de octubre de 2017 a las 9:21

  • si esos display los estilos se declaran en línea, entonces puede usar los siguientes selectores: div[style*="display: none;"] (si el elemento tiene un atributo de estilo en línea que contiene “display: none;“entonces aplicar estilo)

    – UncaughtTypeError

    17 de octubre de 2017 a las 9:26


  • intente usar is(“:visible”) con jquery.

    – Shubham Agrawal

    17 de octubre de 2017 a las 9:26

  • @Amit sí, tienes razón, pero mencioné eso: “Si esos estilos de visualización se declaran en línea…”

    – UncaughtTypeError

    17 oct 2017 a las 10:05

En realidad, hay una solución CSS3 para seleccionar elementos que no tienen un display:none estilo, o dado un explícito style propiedad:

*:not([style*="display: none"]) button{ ... }

Manifestación:

*:not([style*="display: none"]) button{
    color:yellow;
}
<p style="display:block">
  My name is A.
  <button>
a
</button>
</p>
<p style="display: none">
  <button>
b
</button>
</p>

  • Puede ser una solución, pero no una buena recomendación estándar, ya que está utilizando un estilo en línea.

    – RaJesh RiJo

    17 de octubre de 2017 a las 9:57


  • Bueno, tal vez sea una limitación de usar el estilo en línea, pero es una solución, de lo contrario, usaremos JavaScript o jQuery para ello.

    – cнŝdk

    17 de octubre de 2017 a las 9:59

  • @invinciblemuffi me alegro de que te ayude 🙂

    – cнŝdk

    9 de noviembre de 2021 a las 11:35

  • Y el “espacio” importa

    – Iván Gusev

    11 de enero de 2022 a las 13:27

si esos display se declaran los estilos en línea entonces puedes usar los siguientes selectores: div[style*="display: none;"] (si el elemento tiene un atributo de estilo en línea que contiene “display: none”; entonces aplique el estilo)

Selectores de atributos:

el css selector de atributos coincide con elementos en función de la presencia o el valor de un atributo dado.

Origen: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

El atributo contiene selector:

Al buscar un elemento basado en parte de un valor de atributo, pero no una coincidencia exacta, el carácter de asterisco, *, puede usarse dentro de los corchetes de un selector. El asterisco debe estar justo después del nombre del atributo, justo antes del signo igual. Si lo hace, denota que el valor a seguir solo debe aparecer, o estar contenido, dentro del valor del atributo.

Origen: https://learn.shayhowe.com/advanced-html-css/complex-selectors/

No.

No hay selectores que seleccionen elementos en función de los valores de las propiedades que se les aplican.


Tampoco creo que sea práctico para CSS introducir tal característica. Imaginar:

:has-property-value(display: none) {
   display: block;
}

Avatar de usuario de Jose Paredes
José Paredes

Esto no es posible con puro CSS hasta ahora, a menos que especifique explícitamente el css en línea para style="display: none".

Podría usar algo de javascript para filtrar un conjunto de buttons que son visibles.

var buttons = document.querySelectorAll('.block button');

var visibleButtons = [];

buttons.forEach(function (element) {
  if (window.getComputedStyle(element.parentNode).display !== 'none') {
   visibleButtons.push(element);
  }
});

console.log(visibleButtons);
.block {
  display: block;
}

.hidden {
  display: none;
}
<div class="block">
  <button>btn 1</button>
</div>

<div class="block hidden">
  <button>btn 2</button>
</div>

<div class="block">
  <button>btn 3</button>
</div>

No hay tal selector disponible en CSS para seleccionar por sus valores de propiedad. Puedes probar algo con jquery usando :hidden selector para encontrar botones con display:none. Consulte el siguiente fragmento como referencia.

$( ".btnShow" ).click(function() {
  $( ".btn:hidden" ).show( "fast" );
});
.hidden{
  display:none;
}
.btnShow{
  display:block;
  margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="button 1" class="btn">
<input type="button" value="button 2" class="btn">
<input type="button" value="button 3" class="btn hidden">
<input type="button" value="button 4" class="btn">
<input type="button" value="button 5" class="btn hidden">
<input type="button" value="button 6" class="btn">
<input type="button" value="button 7" class="btn">
<input type="button" value="Show hidden buttons" class="btnShow">

  • Realmente es posible con CSS3 para seleccionar elementos utilizando una propiedad de estilo.

    – cнŝdk

    17 de octubre de 2017 a las 9:48

  • Según mi conocimiento, nadie se acerca al estilo en línea.

    – RaJesh RiJo

    17 de octubre de 2017 a las 9:56


  • @chsdk: selecciona elementos basándose únicamente en el valor de un atributo de estilo, no en la propiedad CSS calculada.

    – Quintín

    17 oct 2017 a las 10:15


Puedes consultar con jquery. El siguiente código significa

“Obtenga todos los botones, filtrados por aquellos cuyo padre está visible en la página”, recorra e imprima el html de cada uno.

$(document).ready(function(){
$(":button").filter(function() { return $(this).parent().is(':visible') 
       }).each(function(){
		      console.log($(this).html());
		});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="intro" style="display:block">
    My name is someone.    
   <button>    a    </button>    <button>    b    </button>    
</p>
<p>I live somewhere.</p>    <p>My best friend is someone.</p>
Who is your favourite:    
<ul id="find" style="display:none">
  <li>One</li>      <li>Two</li>      <li><button>    x    </button>    
  <button>    y    </button></li>    
</ul>

  • Realmente es posible con CSS3 para seleccionar elementos utilizando una propiedad de estilo.

    – cнŝdk

    17 de octubre de 2017 a las 9:48

  • Según mi conocimiento, nadie se acerca al estilo en línea.

    – RaJesh RiJo

    17 de octubre de 2017 a las 9:56


  • @chsdk: selecciona elementos basándose únicamente en el valor de un atributo de estilo, no en la propiedad CSS calculada.

    – Quintín

    17 oct 2017 a las 10:15


¿Ha sido útil esta solución?