Es ist möglich, HTML-Elemente zu formatieren, die bestimmte Attribute oder Attributwerte haben.
Der [attribute]
-Selektor wird verwendet, um Elemente mit einem angegebenen Wert auszuwählen Attribut.
Das folgende Beispiel wählt alle <a>-Elemente mit einem Zielattribut aus:
a[target] {
background-color: yellow;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute] Selector</h2>
<p>The links with a target attribute gets a yellow background:</p>
<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>
Der [attribute="value"]
-Selektor wird verwendet, um Elemente mit einem angegebenen Wert auszuwählen Attribut und Wert.
Das folgende Beispiel wählt alle <a>-Elemente mit einem target="_blank"-Attribut aus:
a[target="_blank"] {
background-color: yellow;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
a[target="_blank"] {
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute="value"] Selector</h2>
<p>The link with target="_blank" gets a yellow background:</p>
<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>
Der [attribute~="value"]
-Selektor wird verwendet, um Elemente mit einem Attribut auszuwählen Wert, der ein bestimmtes Wort enthält.
Das folgende Beispiel wählt alle Elemente mit einem Titelattribut aus enthält eine durch Leerzeichen getrennte Liste von Wörtern, darunter „Blume“:
[title~="flower"] {
border: 5px solid yellow;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
[title~="flower"] {
border: 5px solid yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute~="value"] Selector</h2>
<p>All images with the title attribute containing the word "flower" get a yellow border.</p>
<img src="klematis.jpg" title="klematis flower" width="150" height="113">
<img src="img_flwr.gif" title="flower" width="224" height="162">
<img src="img_tree.gif" title="tree" width="200" height="358">
</body>
</html>
Im obigen Beispiel werden Elemente mit title="flower", title="summer" abgeglichen Flower“ und title="flower new", aber nicht title="my-flower" oder title="flowers".
Der [attribute|="value"]
-Selektor wird verwendet, um Elemente mit dem angegebenen Attribut auszuwählen, deren Wert sein kann genau der angegebene Wert oder der angegebene Wert gefolgt von einem Bindestrich (-).
Hinweis: Der Wert muss ein ganzes Wort sein, entweder allein, wie class="top" oder gefolgt von einem Bindestrich ( - ), wie class="top-text".
[class|="top"] {
background: yellow;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
[class|="top"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute|="value"] Selector</h2>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
</body>
</html>
Der [attribute^="value"]
-Selektor wird verwendet, um Elemente mit dem angegebenen Attribut auszuwählen, dessen Wert mit beginnt den angegebenen Wert.
Das folgende Beispiel wählt alle Elemente mit einem Klassenattributwert aus beginnt mit „top“:
Hinweis: Der Wert muss kein ganzes Wort sein!
[class^="top"] {
background: yellow;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
[class^="top"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute^="value"] Selector</h2>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
</body>
</html>
Der [attribute$="value"]
-Selektor wird verwendet, um Elemente auszuwählen, deren Attribut Der Wert endet mit einem angegebenen Wert.
Das folgende Beispiel wählt alle Elemente mit einem Klassenattributwert aus endet mit „test“:
Hinweis: Der Wert muss kein ganzes Wort sein!
[class$="test"] {
background: yellow;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
[class$="test"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute$="value"] Selector</h2>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
</body>
</html>
Der [attribute*="value"]
-Selektor wird verwendet, um Elemente auszuwählen, deren Attribut value enthält einen angegebenen Wert.
Das folgende Beispiel wählt alle Elemente mit einem Klassenattributwert aus enthält „te“:
Hinweis: Der Wert muss kein ganzes Wort sein!
[class*="te"] {
background: yellow;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
[class*="te"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute*="value"] Selector</h2>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
</body>
</html>
Die Attributselektoren können nützlich sein, um Formulare ohne Klasse oder ID zu gestalten:
input[type="text"]
{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"]
{
width: 120px;
margin-left: 35px;
display: block;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}
</style>
</head>
<body>
<h2>Styling Forms</h2>
<form name="input" action="" method="get">
Firstname:<input type="text" name="Name" value="Peter" size="20">
Lastname:<input type="text" name="Name" value="Griffin" size="20">
<input type="button" value="Example Button">
</form>
</body>
</html>
Tipp: Besuchen Sie unser CSS-Formular-Tutorial für weitere Beispiele zum Gestalten von Formularen mit CSS.
Beispiel
[target]
Beispielbeschreibung
Wählt alle Elemente mit einem Zielattribut aus
Beispiel
[target="_blank"]
Beispielbeschreibung
Wählt alle Elemente mit target="_blank" aus
Beispiel
[title~="flower"]
Beispielbeschreibung
Wählt alle Elemente mit einem Titelattribut aus, das eine durch Leerzeichen getrennte Liste von Wörtern enthält, darunter „Blume“.
Beispiel
[lang|="en"]
Beispielbeschreibung
Wählt alle Elemente mit einem lang-Attributwert aus, der mit „en“ beginnt.
Beispiel
a[href^="https"]
Beispielbeschreibung
Wählt alle <a>-Elemente mit einem href-Attributwert aus, der mit „https“ beginnt.
Beispiel
a[href$=".pdf"]
Beispielbeschreibung
Wählt alle <a>-Elemente mit einem href-Attributwert aus, der mit „.pdf“ endet.
Beispiel
a[href*="w3schools"]
Beispielbeschreibung
Wählt alle <a>-Elemente mit einem href-Attributwert aus, der die Teilzeichenfolge „w3schools“ enthält.