Gibt es einen Selektor zum Ausschließen von Anzeige: keine Elemente?

Lesezeit: 5 Minuten

Benutzeravatar von alex
Alex

Ich möchte nur auswählen <buttons> wessen Eltern haben display: block und diese ausschließen <buttons> wessen Eltern haben display:none.

Gibt es eine Möglichkeit, dies zu erreichen?

  • Wenn die display: block und der display: none Eltern sind unterschiedliche Klassen, dann können Sie die Schaltflächen basierend darauf auswählen.

    – Jesse

    17. Oktober 2017 um 9:21 Uhr

  • Warum willst du das? Wenn ein übergeordnetes Element ist display: none dann wird es einfach nicht gerendert. Es spielt keine Rolle, welche anderen Eigenschaften darauf angewendet werden.

    – QUentin

    17. Oktober 2017 um 9:21 Uhr

  • Wenn diese display Stile werden inline deklariert, dann können Sie die folgenden Selektoren verwenden: div[style*="display: none;"] (wenn das Element ein Inline-Stilattribut hat, das “display: none;“dann Stil anwenden)

    – UncaughtTypeError

    17. Oktober 2017 um 9:26 Uhr


  • versuchen Sie es mit is(:visible”) mit jquery.

    – Shubham Agrawal

    17. Oktober 2017 um 9:26 Uhr

  • @Amit ja, du hast recht, aber das habe ich erwähnt: “Wenn diese Anzeigestile inline deklariert werden …”

    – UncaughtTypeError

    17. Oktober 2017 um 10:05 Uhr

Tatsächlich gibt es eine CSS3-Lösung, um Elemente auszuwählen, die kein haben display:none Stil, oder gegeben eine explizite style Eigentum:

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

Demo:

*: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>

  • Es kann eine Lösung sein, aber überhaupt keine gute Empfehlung für Standard, da Sie Inline-Styling verwenden.

    – RaJesh RiJo

    17. Oktober 2017 um 9:57 Uhr


  • Nun, vielleicht ist es eine Einschränkung bei der Verwendung des Inline-Stils, aber es ist eine Lösung, ansonsten verwenden wir JavaScript oder jQuery dafür.

    – cнŝdk

    17. Oktober 2017 um 9:59 Uhr

  • @invinciblemuffi freut mich, dass es dir hilft 🙂

    – cнŝdk

    9. November 2021 um 11:35 Uhr

  • Und “Platz” ist wichtig

    – Iwan Gussew

    11. Januar 2022 um 13:27 Uhr

Wenn diese display Stile werden deklariert in der Reihe Dann können Sie die folgenden Selektoren verwenden: div[style*="display: none;"] (wenn das Element ein Inline-Stilattribut hat, das “display: none;” enthält, dann wenden Sie den Stil an)

Attributselektoren:

Das CSS Attributselektor ordnet Elemente basierend auf dem Vorhandensein oder Wert eines bestimmten Attributs zu.

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

Attribut enthält Selektor:

Wenn Sie nach einem Element suchen, das auf einem Teil eines Attributwerts basiert, aber keine exakte Übereinstimmung darstellt, kann das Sternchen * innerhalb der eckigen Klammern eines Selektors verwendet werden. Das Sternchen sollte direkt nach dem Attributnamen stehen, direkt vor dem Gleichheitszeichen. Dies bedeutet, dass der folgende Wert nur innerhalb des Attributwerts erscheinen oder darin enthalten sein muss.

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

Nein.

Es gibt keine Selektoren, die Elemente basierend auf den Werten von Eigenschaften auswählen, die auf sie zutreffen.


Ich glaube auch nicht, dass es für CSS sinnvoll wäre, ein solches Feature einzuführen. Vorstellen:

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

Benutzeravatar von Jose Paredes
José Paredes

Das ist mit pur nicht möglich CSS Bisher, es sei denn, Sie geben explizit das Inline-CSS an style="display: none".

Sie könnten Javascript verwenden, um eine Reihe von zu filtern buttons die sichtbar sind.

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>

In CSS ist kein solcher Selektor verfügbar, um anhand ihrer Eigenschaftswerte auszuwählen. Sie können etwas mit jquery versuchen, indem Sie verwenden :hidden Selektor zum Suchen von Schaltflächen display:none. Überprüfen Sie den folgenden Ausschnitt als Referenz.

$( ".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">

  • Tatsächlich es ist mit CSS3 möglich um Elemente mithilfe einer Stileigenschaft auszuwählen.

    – cнŝdk

    17. Oktober 2017 um 9:48 Uhr

  • Nach meinem Wissen gibt es keinen Ansatz für den Inline-Stil.

    – RaJesh RiJo

    17. Oktober 2017 um 9:56 Uhr


  • @chsdk — Das wählt Elemente nur basierend auf dem Wert eines Stilattributs aus, nicht auf der berechneten CSS-Eigenschaft.

    – QUentin

    17. Oktober 2017 um 10:15 Uhr


Kannst du mit jquery prüfen. Der folgende Code bedeutet

“Alle Schaltflächen abrufen, gefiltert nach denen, deren übergeordnete Elemente auf der Seite sichtbar sind”, Schleife durch und drucke HTML von jedem.

$(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>

  • Tatsächlich es ist mit CSS3 möglich um Elemente mithilfe einer Stileigenschaft auszuwählen.

    – cнŝdk

    17. Oktober 2017 um 9:48 Uhr

  • Nach meinem Wissen gibt es keinen Ansatz für den Inline-Stil.

    – RaJesh RiJo

    17. Oktober 2017 um 9:56 Uhr


  • @chsdk — Das wählt Elemente nur basierend auf dem Wert eines Stilattributs aus, nicht auf der berechneten CSS-Eigenschaft.

    – QUentin

    17. Oktober 2017 um 10:15 Uhr


1441630cookie-checkGibt es einen Selektor zum Ausschließen von Anzeige: keine Elemente?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy