Erste Schritte mit CSS-Pseudoklassen und Pseudo-Elementen
Sie können CSS-Selektoren verwenden, um Elemente innerhalb einer Webseite auszurichten und zu gestalten. Ein Standardselektor kann auf einen bestimmten Absatz oder alle Überschriften auf einer bestimmten Ebene abzielen. Pseudo-Selektoren gehen noch einen Schritt weiter und ermöglichen es Ihnen, Teile der Seite mit mehr Nuancen gezielt anzusprechen.
Pseudoklassen zielen auf verschiedene Zustände eines Elements ab: wenn der Zeiger zum Beispiel über einen Link schwebt. Pseudo-Elemente ermöglichen es Ihnen, auf einen bestimmten Teil eines Elements abzuzielen, beispielsweise die erste Zeile eines Absatzes.
Lassen Sie uns also ohne weiteres die Grundlagen von Pseudoklassen und Pseudoelementen erklären.
Was ist eine Pseudoklasse?
Eine Pseudoklasse ist ein CSS-Selektor , der HTML-Elemente in einem bestimmten Zustand auswählt. Einige Zustände beziehen sich auf den Kontext, beispielsweise das erste Element seines Typs. Andere sind verhaltensabhängig, beispielsweise wenn der Mauszeiger über einen Link fährt. Sie ermöglichen es Ihnen, Inhalte basierend auf den Aktionen eines Benutzers zu gestalten. Insbesondere die kontextbezogenen Zustände helfen Ihnen, flexiblen, wartbaren und sauberen Code zu schreiben. Verhaltenszustände bieten eine Abkürzung für Funktionen, für die Sie sonst möglicherweise JavaScript verwenden müssten.
Pseudoklassen erkennen Sie leicht daran, dass sie mit einem Doppelpunkt ( : ) beginnen. Sehen wir uns einige Beispiele für einfache Pseudoklassen und Benutzeraktions-Pseudoklassen an.
Einfaches Pseudoklassenbeispiel
Lassen Sie uns zunächst HTML-Code schreiben.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pseudo-class and Pseudo-element</title>
</head>
<body>
<header>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</header>
<section>
<p>
Voluptatum fuga, impedit sequi totam numquam assumenda repellat
tempora sapiente! Nihil unde vel recusandae, expedita aperiam tempora
totam deserunt non porro reprehenderit.
</p>
<p>
Dicta totam non iusto labore sapiente numquam hic tempora earum,
minima repellendus pariatur fugit nobis ex adipisci, tempore vitae
laboriosam harum. Quidem!
</p>
<p>
Suscipit repellendus cupiditate dignissimos eveniet beatae quas
laudantium, laboriosam minus iusto, corporis ullam alias porro sequi
necessitatibus autem ipsam debitis libero sapiente!
</p>
<p>
Iste iure deserunt vel? Nisi omnis quo quibusdam inventore delectus.
Molestias exercitationem in quia possimus consectetur dolorum sequi
veniam quo corporis ullam?
</p>
<p>
Suscipit repellendus cupiditate dignissimos eveniet beatae quas
laudantium, laboriosam minus iusto, corporis ullam alias porro sequi
necessitatibus autem ipsam debitis libero sapiente!
</p>
<p>
Iste iure deserunt vel? Nisi omnis quo quibusdam inventore delectus.
Molestias exercitationem in quia possimus consectetur dolorum sequi
veniam quo corporis ullam?
</p>
<p>
Asperiores illum beatae dolores, dolore quae exercitationem laudantium,
officia nam distinctio tempora deleniti itaque quibusdam iste quo eaque
reiciendis nostrum saepe aperiam?
</p>
</section>
</body>
</html>
Beachten Sie, dass es mehrere Absätze innerhalb desselben Abschnitts gibt. Um sie individuell zu gestalten, können Sie jedem eine separate Klasse zuweisen und einen CSS-Klassenselektor verwenden. Dies ist jedoch nicht sehr praktisch, insbesondere wenn sich der Inhalt häufig ändert. Stattdessen können Sie Pseudoklassen verwenden, die nicht im HTML-Code vorhanden sind, aber dennoch die Ausrichtung und Gestaltung der Elemente ermöglichen. Mal sehen, wie es funktioniert:
CSS
body {
font-size: 1em;
}
header {
font-size: 3em;
}
/* Selecting the first paragraph */
p:first-child {
font-size: 1.3em;
}
/* Selecting the last paragraph */
p:last-child {
color: red;
text-decoration: underline;
}
/* Selecting the nth paragraph */
p:nth-child(3) {
color: blue;
font-style: italic;
}
p:nth-child(4) {
color: #666;
font-size: 1.9em;
}
p:nth-child(5) {
color: yellowgreen;
font-weight: bold;
}Ausgabe:
Mit einfachen Pseudoklassen wie :first-child , :nth-child(x) und :last-child können wir die Absätze einfach auswählen und formatieren. Beachten Sie, dass diese Pseudoklassen die Absätze selbst auswählen, nicht ihre untergeordneten Elemente.
Beispiel für eine Benutzeraktions-Pseudoklasse
Benutzeraktions- oder Verhaltens-Pseudoklassen gelten nur, wenn der Benutzer mit dem Dokument interagiert. Zu den beliebtesten Beispielen gehören die Zustände :link , :visited , :hover und :focus . Sehen wir uns das Beispiel für den :hover- Zustand für einen Link und ein Bild an.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pseudo-class and Pseudo-element</title>
</head>
<body>
<div class="image-box">
<img class="image-back" src="images/By_Unsplash_Search.jpg" alt="Coding on a laptop" />
<img class="img-front" src="images/By_Unsplash.jpg" alt="Search bar with blue background" />
</div>
<div>
<a href="#">Learn more about Pseudo-classes</a>
</div>
</body>
</html>
In diesem Beispiel gibt es zwei Bilder und einen Link. Die Bilder werden an derselben Stelle positioniert, sodass Sie sie wechseln können, indem Sie eines ausblenden und das andere anzeigen.
CSS
body {
font-family: 'Inter', sans-serif;
}
.image-box {
position: relative;
width: 70%;
margin: 5em;
color: #fff;
}
.image-box img {
display: inline-block;
position: absolute;
left: 0;
width: 70%;
}
.image-box img.img-front:hover{
opacity:0;
cursor: pointer;
}
a {
position: absolute;
bottom: 2em;
left: 3em;
text-decoration: none;
color: #222;
display: inline-block;
font-size: 2.5em;
font-weight: 600;
border-bottom: 5px solid rgb(250, 0, 0);
}
a:hover {
color: rgb(250, 0, 0);
border-bottom: none;
}
Dieses erste Beispiel demonstriert die Wirkung des Bewegens über den Link. Das CSS ändert seine Farbe und seinen Rahmen:
In diesem zweiten Beispiel sehen Sie, wie sich der Mauszeiger über das Bild bewegt. Die Deckkraft ist auf 0 eingestellt, wodurch das Bild effektiv transparent wird.
Was ist ein Pseudoelement?
Ein Pseudoelement verhält sich ähnlich wie eine Pseudoklasse. Denken Sie daran, dass eine Pseudoklasse auf ein vorhandenes Element angewendet wird. Ein Pseudoelement hingegen verhält sich so, als ob ein neues HTML-Element existiert. Außerdem beginnt ein Pseudoelement mit einem Doppelpunkt ( :: ). Sehen wir uns an einem Beispiel an, wie es funktioniert.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pseudo-class and Pseudo-element</title>
</head>
<body>
<header>
<div class="header-img">
<img src="By_Unsplash.jpg" alt="Coding on a laptop" />
</div>
</header>
</body>
</html>
Jetzt verwenden wir ein ::before -Pseudoelement, um den Text Learn More hinzuzufügen, und ein ::after -Pseudoelement, um den Text Jetzt kaufen hinzuzufügen , wobei nur CSS verwendet wird. Wir wenden auch die Eigenschaft position an, um diese Pseudoelemente relativ zum übergeordneten Container zu platzieren.
body {
font-family: 'Inter', sans-serif;
color: #666;
}
img {
width: 30em;
vertical-align: middle;
}
.header-img::before {
content: "Learn More";
color: #fff;
background-color: rgb(75, 159, 192);
padding: 0.3em 5em;
display: inline-block;
position: absolute;
top: 25px;
left: -70px;
transform: rotate(-45deg);
}
.header-img::after {
content: "Buy Now";
color: #fff;
background-color: rgb(212, 115, 91);
padding: 0.3em 5em;
display: inline-block;
position: absolute;
bottom: 25px;
right: -70px;
transform: rotate(-45deg);
}
header {
position: relative;
overflow: hidden;
font-weight: 600;
}
header,
section {
width: 30em;
}
Der endgültige Effekt überlagert oben links und unten rechts im Bild „Band“-ähnliche Beschriftungen:
Holen Sie sich Pseudoklassen und Pseudoelemente in die Hände
CSS-Pseudoklassen und Pseudo-Elemente öffnen bei richtiger Verwendung Türen zu vielen Möglichkeiten. Sie können sich zunächst überfordert fühlen, aber das Üben dieser Technik ist der Schlüssel zur Verbesserung Ihrer Webdesign-Fähigkeiten. Der Schlüssel ist, Ihre Designs immer gründlich zu testen und dabei Funktionen wie die DevTools von Google Chrome zu nutzen.
Wir hoffen, dass Sie die Grundlagen von Pseudoklassen und Pseudoelementen kennengelernt haben. Denken Sie daran, dass das Lernen nie aufhört! Erkunden Sie also weiterhin neue CSS-Selektoren und versuchen Sie, sie in Ihrem bevorstehenden Projekt zu implementieren und zu testen.