Erweiterte Elementauswahl in CSS – Techniken und Beispiele

Pseudoklassen

Mit Pseudoklassen können Sie bestimmte Zustände oder Positionen eines Elements auswählen. Wählt beispielsweise :hover das Element aus, wenn sich der Mauszeiger darüber befindet, :focus wählt das Element aus, wenn es ausgewählt ist oder den Fokus hat, :nth-child() wählt ein bestimmtes untergeordnetes Element in einer Gruppe aus.

Beispiele:

/* Select all links when hovered over and change the text color */  
a:hover {  
  color: red;  
}  
  
/* Select the <input> element when it is focused and change the border */  
input:focus {  
  border: 2px solid blue;  
}  
  
/* Select the second element in a group of <li> elements and change the text color */  
li:nth-child(2) {  
  color: green;  
}  

 

Pseudoelemente

Mit Pseudoelementen können Sie virtuelle Elemente erstellen, um ein vorhandenes Element anzupassen.

::before Erstellen Sie beispielsweise ::after Elemente vor und nach einem Element ::first-line und ::first-letter wählen Sie die erste Zeile und den ersten Buchstaben eines Elements aus.

Beispiele:

/* Add content before each <p> element and style it */  
p::before {  
  content: ">> ";  
  font-weight: bold;  
  color: gray;  
}  
  
/* Style the first letter of <h1> element */  
h1::first-letter {  
  font-size: 2em;  
  font-weight: bold;  
  color: red;  
}  

 

Kombinatoren

Mit Kombinatoren können Sie Selektoren kombinieren, um Elemente basierend auf ihrer Beziehung auszuwählen. element1 element2 Wählt beispielsweise element2 innerhalb aus element1, element1 > element2 wählt direkte untergeordnete Elemente von aus element1 und element1 + element2 wählt element2 unmittelbar danach aus element1.

Beispiele:

/* Select <span> elements inside an element with class "container" */  
.container span {  
  color: purple;  
}  
  
/* Select <li> elements that are direct children of <ul> */  
ul > li {  
  list-style-type: square;  
  color: blue;  
}  

 

Attributselektoren

Mit Attributselektoren können Sie Elemente basierend auf dem Wert ihrer Attribute auswählen. Wählt beispielsweise [attribute] Elemente mit dem Attribut aus attribute, [attribute=value] wählt Elemente mit dem Attribut attribute gleich aus value, [attribute^=value] wählt Elemente mit dem Attribut aus, das attribute mit beginnt value.

Beispiele:

/* Select all elements with the attribute data-type */  
[data-type] {  
  font-weight: bold;  
  color: orange;  
}  
  
/* Select all <a> elements with the href attribute starting with "https://" */  
a[href^="https://"] {  
  color: blue;  
  text-decoration: underline;  
}  

 

:not() Wähler

Mit dem Selektor können Sie Elemente auswählen, die nicht mit einem bestimmten Selektor übereinstimmen. Wählt beispielsweise Elemente aus, die nicht über die Klasse verfügen, und wählt Elemente aus, die nicht über die ID verfügen. :not() :not(.class) class :not(#id) id

Beispiele:

/* Select all <div> elements that do not have the class "hidden" */  
div:not(.hidden) {  
  display: block;  
  background-color: lightgray;  
}  
  
/* Select all <input> elements that do not have the ID "email-input" */  
input:not(#email-input) {  
  border: 1px solid gray;  
}  

 

Diese Beispiele veranschaulichen die erweiterte Elementauswahl in CSS. Sie können diese Techniken anpassen und anwenden, um Elemente auf Ihrer Webseite nach Ihren Wünschen zu gestalten und anzupassen.