CSS Klassen kombinieren

Ü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 {
  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