Neueste Web-Entwicklung Tutorials
 

CSS Attributselektoren

❮ Zurück Nächstes Kapitel ❯

Style-HTML-Elemente mit bestimmten Attributen

Es ist möglich, HTML-Elemente, um Stil, die bestimmte Attribute oder Attributwerte haben.

CSS [Attribut] Wahl

Das [attribute] Selektor wird verwendet , um Elemente mit einem angegebenen Attribut auszuwählen.

Das folgende Beispiel wählt alle <a> Elemente mit einem Zielattribut:

Beispiel

a[target] {
    background-color: yellow;
}
Versuch es selber "

CSS [Attribut = "Wert"] Wahl

Das [attribute="value"] Selektor wird verwendet , um Elemente mit einem angegebenen Attribut und Wert auszuwählen.

Das folgende Beispiel wählt alle <a> Elemente mit einem target="_blank" Attribut:

Beispiel

a[target="_blank"] {
    background-color: yellow;
}
Versuch es selber "

CSS [Attribut ~ = "Wert"] Wahl

Das [attribute~="value"] Selektor wird verwendet , um Elemente mit einem Attributwert auszuwählen , um einen bestimmten Wort enthalten.

Das folgende Beispiel wählt alle Elemente mit einem Titel - Attribut, das eine durch Leerzeichen getrennte Liste von Wörtern enthält, von denen eine " flower ":

Beispiel

[title~="flower"] {
    border: 5px solid yellow;
}
Versuch es selber "

Das obige Beispiel entsprechen Elemente mit title="flower", title="summer flower" , und title="flower new" , aber nicht title="my-flower" oder title="flowers" .

CSS [Attribut | = "Wert"] Wahl

Das [attribute|="value"] Selektor wird verwendet , um Elemente mit dem angegebenen Attribut auszuwählen , die mit dem angegebenen Wert zu starten.

Das folgende Beispiel wählt alle Elemente mit einem Klassenattributwert, der mit beginnt "top" :

Anmerkung: Der Wert ein ganzes Wort sein muss, entweder allein, wie class="top" oder gefolgt von einem Bindestrich ( - ) , wie class="top-text" !

Beispiel

[class|="top"] {
    background: yellow;
}
Versuch es selber "

CSS [Attribut ^ = "Wert"] Wahl

Das [attribute^="value"] wird Selektor verwendet , um Elemente auszuwählen , deren Attributwert beginnt mit einem angegebenen Wert.

Das folgende Beispiel wählt alle Elemente mit einem Klassenattributwert, der mit beginnt "top" :

Anmerkung: Der Wert nicht ein ganzes Wort sein muss!

Beispiel

[class^="top"] {
    background: yellow;
}
Versuch es selber "

CSS [Attribut $ = "Wert"] Wahl

Das [attribute$="value"] wird Selektor verwendet , um Elemente auszuwählen , deren Attributwert endet mit einem angegebenen Wert.

Das folgende Beispiel wählt alle Elemente mit einem Klassenattributwert mit der Endung "test" :

Anmerkung: Der Wert nicht ein ganzes Wort sein muss!

Beispiel

[class$="test"] {
    background: yellow;
}
Versuch es selber "

CSS [Attribut * = "Wert"] Wahl

Das [attribute*="value"] wird Selektor verwendet , um Elemente auszuwählen , deren Attributwert enthält einen bestimmten Wert.

Das folgende Beispiel wählt alle Elemente mit einem Klassenattributwert, enthält "te" :

Anmerkung: Der Wert nicht ein ganzes Wort sein muss!

Beispiel

[class*="te"] {
    background: yellow;
}
Versuch es selber "

Styling Forms

Die Attributselektoren können für Styling - Formulare ohne nützlich sein , class oder ID :

Beispiel

input[type="text"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
}

input[type="button"] {
    width: 120px;
    margin-left: 35px;
    display: block;
}
Versuch es selber "

Tipp: Besuchen Sie unsere CSS Forms Tutorial für weitere Beispiele, wie Formulare mit CSS zu stylen.

Testen Sie sich mit Übungen!

Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 » Übung 6»

Weitere Beispiele für CSS-Selektoren

Nutzen Sie unser CSS - Selektor - Tester die verschiedenen Selektoren zu demonstrieren.

Eine vollständige Referenz aller CSS - Selektoren, gehen Sie bitte auf unsere CSS - Selektoren Referenz .


❮ Zurück Nächstes Kapitel ❯