Det är möjligt att utforma HTML-element som har specifika attribut eller attributvärden.
[attribute]
-väljaren används för att välja element med en specificerad attribut.
Följande exempel väljer alla <a>-element med ett målattribut:
a[target] {
background-color: yellow;
}
Prova själv →
<!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>
[attribute="value"]
-väljaren används för att välja element med en specificerad attribut och värde.
Följande exempel väljer alla <a>-element med ett target="_blank"-attribut:
a[target="_blank"] {
background-color: yellow;
}
Prova själv →
<!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>
[attribute~="value"]
-väljaren används för att välja element med ett attribut värde som innehåller ett angivet ord.
Följande exempel väljer alla element med ett titelattribut som innehåller en mellanslagsseparerad lista med ord, varav ett är "blomma":
[title~="flower"] {
border: 5px solid yellow;
}
Prova själv →
<!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>
Exemplet ovan kommer att matcha element med title="blomma", title="sommar flower", och title="flower new", men inte title="my-flower" eller title="flowers".
[attribute|="value"]
-väljaren används för att välja element med det angivna attributet, vars värde kan vara exakt det angivna värdet, eller det angivna värdet följt av ett bindestreck (-).
Obs! Värdet måste vara ett helt ord, antingen ensamt, som class="top", eller följt av ett bindestreck( - ), som class="top-text".
[class|="top"] {
background: yellow;
}
Prova själv →
<!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>
[attribute^="value"]
-väljaren används för att välja element med det angivna attributet, vars värde börjar med det angivna värdet.
Följande exempel väljer alla element med ett klassattributvärde som börjar med "top":
Obs! Värdet behöver inte vara ett helt ord!
[class^="top"] {
background: yellow;
}
Prova själv →
<!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>
[attribute$="value"]
-väljaren används för att välja element vars attribut värdet slutar med ett angivet värde.
Följande exempel väljer alla element med ett klassattributvärde som slutar med "test":
Obs! Värdet behöver inte vara ett helt ord!
[class$="test"] {
background: yellow;
}
Prova själv →
<!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>
[attribute*="value"]
-väljaren används för att välja element vars attribut värde innehåller ett specificerat värde.
Följande exempel väljer alla element med ett klassattributvärde som innehåller "te":
Obs! Värdet behöver inte vara ett helt ord!
[class*="te"] {
background: yellow;
}
Prova själv →
<!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>
Attributväljarna kan vara användbara för att utforma formulär utan klass eller ID:
input[type="text"]
{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"]
{
width: 120px;
margin-left: 35px;
display: block;
}
Prova själv →
<!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>
Tips: Besök vår handledning för CSS-formulär för fler exempel på hur du formaterar formulär med CSS.
Exempel
[target]
Exempelbeskrivning
Väljer alla element med ett målattribut
Exempel
[target="_blank"]
Exempelbeskrivning
Markerar alla element med target="_blank"
Exempel
[title~="flower"]
Exempelbeskrivning
Väljer alla element med ett titelattribut som innehåller en mellanslagsseparerad lista med ord, varav ett är "blomma"
Exempel
[lang|="en"]
Exempelbeskrivning
Väljer alla element med ett lang-attributvärde som börjar med "en"
Exempel
a[href^="https"]
Exempelbeskrivning
Markerar alla <a> element med ett href-attributvärde som börjar med "https"
Exempel
a[href$=".pdf"]
Exempelbeskrivning
Markerar alla <a>-element med ett href-attributvärde som slutar med ".pdf"
Exempel
a[href*="w3schools"]
Exempelbeskrivning
Väljer alla <a>-element med ett href-attributvärde som innehåller delsträngen "w3schools"