CSS-attributväljare


Innehållsförteckning

    Visa innehållsförteckning


Stil HTML-element med specifika attribut

Det är möjligt att utforma HTML-element som har specifika attribut eller attributvärden.


CSS-väljare [attribut]

[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:

Exempel

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>



CSS-väljare [attribute="value"]

[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:

Exempel

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>



CSS-väljare [attribut~="värde"]

[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":

Exempel

[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".



CSS-väljare [attribut|="värde"]

[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".

Exempel

[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>



CSS-väljare [attribut^="värde"]

[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!

Exempel

[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>



CSS-väljare [attribut$="värde"]

[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!

Exempel

[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>



CSS-väljare [attribut*="värde"]

[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!

Exempel

[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>



Stylingformulär

Attributväljarna kan vara användbara för att utforma formulär utan klass eller ID:

Exempel

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.



Alla CSS-attributväljare

[attribute]

Exempel

[target]

Exempelbeskrivning

Väljer alla element med ett målattribut

[attribute=value]

Exempel

[target="_blank"]

Exempelbeskrivning

Markerar alla element med target="_blank"

[attribute~=value]

Exempel

[title~="flower"]

Exempelbeskrivning

Väljer alla element med ett titelattribut som innehåller en mellanslagsseparerad lista med ord, varav ett är "blomma"

[attribute|=value]

Exempel

[lang|="en"]

Exempelbeskrivning

Väljer alla element med ett lang-attributvärde som börjar med "en"

[attribute^=value]

Exempel

a[href^="https"]

Exempelbeskrivning

Markerar alla <a> element med ett href-attributvärde som börjar med "https"

[attribute$=value]

Exempel

a[href$=".pdf"]

Exempelbeskrivning

Markerar alla <a>-element med ett href-attributvärde som slutar med ".pdf"

[attribute*=value]

Exempel

a[href*="w3schools"]

Exempelbeskrivning

Väljer alla <a>-element med ett href-attributvärde som innehåller delsträngen "w3schools"