CSS Klassen kombinieren

Datum
12.07.2022

Übersicht

  1. .box.content
  2. .box > .content
  3. .box .content
  4. .box + .content
  5. Teaser Beispiel
  6. .box.content:hover
  7. .box:hover > .content
  8. .box:hover .content
  9. .box:hover + .content

.box.content

Bei dieser Kombination, muss das Element beide Klassen besitzen.

.box.content {
  color: #009ee0;
}
<div class="box content"></div>

.box > .content

Das Element mit der Klasse Content, muss ein direkt untergeordnetes Element von Box sein.

.box > .content {
  color: #009ee0;
}
<div class="box">
  <div class="content"></div>
  <div class="content"></div>
</div>

Dabei erhalten beide Div-Elemente, mit der Klasse Content, den Farbwert Schwarz.

<div class="box">
  <div class="subbox">
    <div class="content"></div>
  </div>
</div>

Hier würde kein Element den Color Wert erhalten.

.box .content

Das Element mit der Klasse Content, muss ein untergeordnetes Element von Box sein.

.box .content {
  color: #009ee0;
}
<div class="box">
  <div class="subbox">
    <div class="content"></div>
  </div>
  <div class="content"></div>
</div>

Die beiden Elemente mit der Klasse Content erhalten den Color Wert.

.box + .content

Das Element mit der Klasse Content, muss das nächste anliegende Element von Box sein. Es darf dabei nicht von einem anderem Element unterbrochen werden.

.box + .content {
  color: #009ee0;
}
<div class="box"></div>
<div class="content"></div>

Das anliegende Div-Elemnt mit der klasse Content erhält den Wert.

<div class="box"></div>
<div class="header"></div>
<div class="content"></div>

Hier würde kein Element den Color Wert erhalten.

Teaser Beispiel

2 verschiedene Teaser-Bild-Formate. Die P Tags sollen bei den anliegenden Teaser-Bildern unterschiedliche Formate erhalten.

.teaser {
  width: 100%;
  float: left;
}
.teaser .image{
  width: 75px;
  height: 75px;
  margin: 25px 15px 0 25px;
  background-color: #999;
  text-align: center;
  float: left;
}
.teaser .imagebig{
  width: 100px;
  height: 100px;
  margin: 0 15px 0 0;
  background-color: #999;
  text-align: center;
  float: left;
}
.teaser p{
  font-size: 16px;
  color: #333333;
}
.teaser .image + h4 + p{
  font-size: 16px;
  color: #666666;
}
.teaser .imagebig + h4 + p{
  font-size: 14px;
  color: #333333;
}
<div class="teaser">
  <h4>Title</h4>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div><div class="teaser">
  <div class="image">
    225 x 225
  </div>
  <h4>Title</h4>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div class="teaser">
  <div class="imagebig">
    250 x 250
  </div>
  <h4>Title</h4>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

Wenn das Element die Klassen Box und Content hat, bekommt es den Farbwert zugewiesen. Beim Hover-Event wird der Farbwert überschrieben.

Box Content
.box.content {
  color: #009ee0;
}
.box.content:hover {
  color: #000;
}
<div class="box content">Box Content</div>

.box:hover > .content

Bei dem Hover-Event über das Element, mit der Klasse Box, wird das Element, mit der Klasse Content, verbreitert.

.box {
  height: 50px;
  width: 300px;
  background-color: #009ee0;
}
.content {
  height: 50px;
  width: 50px;
  background-color: #FE6000;
}
.box:hover > .content {
  width: 150px;
}
<div class="box">
  <div class="content"></div>
</div>

.box:hover .content

Bei dem aktivieren des Hover-Effekts auf dem Element mit der Klasse Box, werden alle Elemente mit der Klasse Content im Box Element verbreitert.

.box {
  height: 100px;
  width: 300px;
  background-color: #009ee0;
}
.content {
  height: 50px;
  width: 50px;
  background-color: #FE6000;
}
.box:hover .content {
  width: 150px;
}
<div class="box">
  <div class="subbox">
    <div class="content"></div>
  </div>
  <div class="content"></div>
</div>

.box:hover + .content

Bei dem aktivieren des Hover-Effekts auf dem Element mit der Klasse Box, wird das anliegende Elemente mit der Klasse Content verbreitert.

.box {
  height: 50px;
  width: 300px;
  background-color: #009ee0;
}
.content {
  height: 50px;
  width: 50px;
  background-color: #FE6000;
}
.box:hover + .content {
  width: 150px;
}
<div class="box">
  <div class="content"></div>
</div>
<div class="content"></div>

CSS Tutorial

Voriger Schritt: CSS Styles definieren

Zur Turtorial-Reihe: CSS Tutorial

Nächster Schritt: CSS Flexbox Tutorial

Marc Borkowski
Autor: Marc Borkowski

Ich bin in Berlin geboren und habe mich in eine ruhigere Stadt verkrümelt, Rostock. Ich habe mehrere Jahre Erfahrung im Bereich Frontend und bilde mich aktuell im grafischen Bereich weiter. Meine Zukunft sehe ich beim gestalterischen Web.

Kontakt

E-Mail: moin@boolie.org | Über mich Seite

Instagram logoYouTube Logo
Um ein Kommentar zu verfassen, bitte einloggen.
Kommentare (0)