Mehrere Klassen in einem Element in CSS verwenden

1. Weisen Sie einem Element mehrere Klassen zu und gestalten Sie beide Klassen gleichzeitig in CSS
2. Weisen Sie einem Element mehrere Klassen zu und gestalten Sie beide Klassen einzeln in CSS

In diesem Tutorial werden Methoden zur Verwendung der mehreren Klassen in einem einzigen Element in CSS vorgestellt.

Weisen Sie einem Element mehrere Klassen zu und gestalten Sie beide Klassen gleichzeitig in CSS

In HTML verwenden wir das Attribut class, um die Klasse einem Element zuzuweisen. Wir können Klasse auf alle Elemente in HTML anwenden, wie p, h1 bis h6, a, div und viele mehr. In CSS verwenden wir den Klassenselektor . um das Element mit dem entsprechenden Klassennamen auszuwählen, und wir können Stile darauf anwenden. Es gibt jedoch Fälle, in denen wir einer einzelnen Klasse mehrere Elemente zuweisen und die Klassen formatieren möchten. In solchen Fällen erlaubt uns HTML, einem einzelnen Element mehrere Klassen zuzuweisen. Wir können in jedem Element mehrere durch Leerzeichen getrennte Klassennamen schreiben. CSS ermöglicht es uns auch, solche Klassen zu stylen, indem wir beide Klassen gleichzeitig auswählen. Wir können das . selector, um die erste Klasse auszuwählen und erneut die zweite Klasse auszuwählen, ohne Leerzeichen zu lassen. Dann können wir die Stile für die ausgewählten Klassen festlegen. Wir können einem einzelnen Element mehr als zwei Klassen zuweisen und die Stile auf alle Klassen gleichzeitig anwenden.

Erstellen Sie beispielsweise drei p-Tags in HTML und geben Sie ihnen die Klassennamen first, second und first second. Beachten Sie, dass für die dritte Klasse ein Leerraum zwischen den Klassennamen verbleibt. Schreiben Sie die Texte KTM, Honda und Kawasaki für die drei Klassen zwischen die p-Tags. Wählen Sie in CSS die Klasse first aus und stellen Sie deren color auf orange. Ebenso wählen Sie die Klasse second und stellen diese auf red und schliesslich wählen Sie beide Klassen als .first.second und stellen Sie die Farbe als green ein.

Im folgenden Beispiel haben wir mehrere Klassen in einem einzigen Element verwendet und diese Klassen gleichzeitig gestylt.

Beispielcode:

<p class="first">KTM</p>
<p class="second">Honda</p>
<p class="first second">Kawasaki</p>

.first { color: orange; }
.second { color: red; }
.first.second { color: green; }

Weisen Sie einem Element mehrere Klassen zu und gestalten Sie beide Klassen einzeln in CSS

Wir können einem einzelnen HTML-Element mehrere Klassen zuweisen und beide Klassen einzeln stylen, um CSS effizienter zu schreiben. Mit diesem Ansatz können wir die Redundanz in den angewendeten Stilen steuern. Wir können die gemeinsamen Stile auf mehrere Klassen anwenden und die einzigartigen Stile auf die spezifische Klasse anwenden.

Erstellen Sie beispielsweise eine Klasse title in einem p-Tag und schreiben Sie etwas Text. Erstellen Sie auf ähnliche Weise ein weiteres Absatz-Tag und weisen Sie diesem die mehreren Klassen title text zu. Schreiben Sie etwas Text auf das Absatz-Tag. Wählen Sie in CSS die Klasse title aus und stellen Sie die background-color auf skyblue. Wählen Sie dann die Klasse text aus und geben Sie ihr die Farbe green.

Hier wird die Hintergrundfarbe beider Absätze auf himmelblau gesetzt. Dies liegt daran, dass wir die Klasse title so gestaltet haben, dass sie die Hintergrundfarbe festlegt. Und in beiden Absätzen gibt es eine title-Klasse. Der zweite Absatz wird jedoch nur seine Farbe in green ändern, da wir diesen Stil nur auf die Klasse text angewendet haben. Dieser Ansatz ermöglicht es uns, mehrere Klassen für ein einzelnes Element zu verwenden, um die gemeinsamen Stile und den individuellen Stil auf die Elemente anzuwenden. Auf diese Weise können wir einem einzelnen Element mehrere Klassen zuweisen und die Klassen individuell stylen, um effizientes CSS zu schreiben.

Beispielcode:

<p class="title">
 Hello there!
</p>
<p class="title text">
 Welcome to Rara Lake
</p> 

.title {
    margin-bottom: 30px;
    background-color: skyblue;
}

.text {
    color: green;
}