css Anzeige probleme in bootstrap4 .... und -> .test.teil oder .test .teil

[Reinhard]

Ich habe einige Probleme mit der Zuweisung bei CSS. So möchte ich den Hintergrund bei einer Einblendung eine MODAL Element bei BOOTSTRAP4 ändern. Das Element wird über

<div class="modal aendern fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

in der Bootstrap CSS findet man dazu

.modal-backdrop.show {
opacity: 0.5;
}

Um in diese CSS nicht zu verändern, mach ich das in meiner eigenen style.css

.modal-backdrop.show {
  opacity: 0;
}

Jetzt funktioniert es.

Jetzt kommt mein Problem ich will es nur in einem, nicht in allen MODAL ändern,

div#exampleModal .modal-backdrop.show {
    opacity: 0;
}

aber so auch nicht;

.aendern {
    opacity: 0;
}

Aber das hat keinerlei Auswirkung….

Auch verstehe ich nicht was genau der Unterschied zwischen

.test .teil{color:#ff0000; }

Und

.test.teil{color:#ff0000; }

Ist.

[Tabellenkalk]

Hallo,

Auch verstehe ich nicht was genau der Unterschied zwischen

.test .teil{color:#ff0000; }

Und

.test.teil{color:#ff0000; }

Ist.

Das Leerzeichen ist ein Selektoren-Kombinator.

Gruß
Kalk

[Matthias Apsel]

Hallo Reinhard,

vielleicht hilft zum Lernen noch: https://wiki.selfhtml.org/wiki/CSS/Selektoren/Klassenselektor, insbesondere das erste "Beachten Sie".

Bis demnächst
Matthias

[Tabellenkalk]

Hallo,

<div class="modal aendern fade"  
  id="exampleModal" 
  tabindex="-1" 
  role="dialog" 
  aria-labelledby="exampleModalLabel" 
  aria-hidden="true">

in der Bootstrap CSS findet man dazu

.modal-backdrop.show {
opacity: 0.5;
}

Das gezeigte HTML und CSS haben so nichts miteinander zu tun. Möglicherweise spielt noch ein nicht gezeigtes JS eine Rolle.

Jedenfalls kann man mit dem gezeigten Ausschnitt nicht sagen, warum da bei dir etwas funktioniert oder eben nicht.

Gruß
Kalk

[Rolf B]

Hallo Reinhard,

Die Angabe mit Leerstelle ist eine Eltern-Kind Beziehung (direkt oder indirekt).

.test .teil { color:#ff0000; }

Sie gilt z.B. für

<section class="test">
   <article>
      <p class="teil">Ich bin roter Text</p>
   </article>
</section>
<ul class="test dings">
   <li class="bums teil">Ich bin ein roter Listenpunkt</li>
</ul>

Beide Texte werden rot, weil der Selektor .test .teil ein Element trifft, das die Klasse "teil" hat und irgendein Elternelement mit Klasse "test".

Ohne die Leerstelle ist es eine UND-Bedingung für zwei Klassen des gleichen Elements. Das hier

.test.teil { color:#ff0000; }

gilt für sowas

<h1 class="test teil">Die rote Überschrift des Tages</h1>
<p class="foo teil bar test baz">Rottext mit vielen Klassen</h1>

Also: Elemente, in deren Klassenliste irgendwo "test" und "teil" vorkommt.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Die Angabe mit Leerstelle ist eine Eltern-Kind Beziehung

Nein, das ist es nicht.

(direkt oder indirekt).

Die Eltern-Kind-Beziehung ist immer direkt. Die Oma ist kein Elternteil. Der Uropa auch nicht. Es sind Vorfahren.

Du meintest: Vorfahren-Nachfahren-Beziehung.

Und so heißt dann (Leerzeichen) auch Nachfahren-Kombinator (descendant combinator).

Eltern-Kind-Beziehung gibt’s mit Kind-Kombinator (child combinator) >. Und ohne Deppenleerzeichen. 😉

LLAP 🖖