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

[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