CSS-attributvælger

Indholdsfortegnelse

    Vis indholdsfortegnelse

Stil HTML-elementer med specifikke attributter

Det er muligt at style HTML-elementer, der har specifikke attributter eller attributværdier.

CSS-vælger [attribut]

[attribute]-vælgeren bruges til at vælge elementer med en specificeret attribut.

Følgende eksempel vælger alle <a>-elementer med en target-attribut:

Eksempel

a[target] {
  background-color: yellow;
}

Prøv det selv →

<!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ælger [attribute="value"]

[attribute="value"]-vælgeren bruges til at vælge elementer med en specificeret egenskab og værdi.

Følgende eksempel vælger alle <a>-elementer med en target="_blank"-attribut:

Eksempel

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

Prøv det selv →

<!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ælger [attribut~="værdi"]

[attribute~="value"]-vælgeren bruges til at vælge elementer med en attribut værdi, der indeholder et bestemt ord.

Følgende eksempel vælger alle elementer med en title-attribut, der indeholder en mellemrumsadskilt liste over ord, hvoraf et er "blomst":

Eksempel

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

Prøv det selv →

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

Eksemplet ovenfor vil matche elementer med title="flower", title="sommer flower", og title="flower new", men ikke title="my-flower" eller title="flowers".

CSS-vælger [attribut|="værdi"]

[attribute|="value"]-vælgeren bruges til at vælge elementer med den angivne attribut, hvis værdi kan være præcis den angivne værdi eller den angivne værdi efterfulgt af en bindestreg (-).

Bemærk: Værdien skal være et helt ord, enten alene, f.eks class="top", eller efterfulgt af en bindestreg( - ), som class="top-text".

Eksempel

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

Prøv det selv →

<!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ælger [attribut^="værdi"]

[attribute^="value"]-vælgeren bruges til at vælge elementer med den angivne attribut, hvis værdi starter med den angivne værdi.

Følgende eksempel vælger alle elementer med en klasseattributværdi, der starter med "top":

Bemærk: Værdien behøver ikke at være et helt ord!

Eksempel

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

Prøv det selv →

<!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ælger [attribut$="værdi"]

[attribute$="value"]-vælgeren bruges til at vælge elementer, hvis attribut værdi slutter med en specificeret værdi.

Følgende eksempel vælger alle elementer med en klasseattributværdi, der slutter med "test":

Bemærk: Værdien behøver ikke at være et helt ord!

Eksempel

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

Prøv det selv →

<!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ælger [attribut*="værdi"]

[attribute*="value"]-vælgeren bruges til at vælge elementer, hvis attribut værdi indeholder en specificeret værdi.

Følgende eksempel vælger alle elementer med en klasseattributværdi, der indeholder "te":

Bemærk: Værdien behøver ikke at være et helt ord!

Eksempel

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

Prøv det selv →

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

Styling formularer

Attributvælgerne kan være nyttige til styling af formularer uden klasse eller ID:

Eksempel

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

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

Prøv det selv →

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

Tip: Besøg vores CSS-formulartutorial for at få flere eksempler på, hvordan du style formularer med CSS.

Alle CSS-attributvælgere

[attribute]

Eksempel

[target]

Eksempelbeskrivelse

Vælger alle elementer med en målattribut

[attribute=value]

Eksempel

[target="_blank"]

Eksempelbeskrivelse

Vælger alle elementer med target="_blank"

[attribute~=value]

Eksempel

[title~="flower"]

Eksempelbeskrivelse

Vælger alle elementer med en titelattribut, der indeholder en mellemrumsadskilt liste med ord, hvoraf et er "blomst"

[attribute|=value]

Eksempel

[lang|="en"]

Eksempelbeskrivelse

Vælger alle elementer med en lang-attributværdi, der starter med "en"

[attribute^=value]

Eksempel

a[href^="https"]

Eksempelbeskrivelse

Vælger alle <a>-elementer med en href-attributværdi, der starter med "https"

[attribute$=value]

Eksempel

a[href$=".pdf"]

Eksempelbeskrivelse

Vælger alle <a>-elementer med en href-attributværdi, der slutter med ".pdf"

[attribute*=value]

Eksempel

a[href*="w3schools"]

Eksempelbeskrivelse

Vælger alle <a>-elementer med en href-attributværdi, der indeholder understrengen "w3schools"