En CSS-väljare väljer HTML-elementen du vill styla.
CSS-väljare används för att "hitta" (eller välja) HTML-elementen du vill styla.
Vi kan dela in CSS-väljare i fem kategorier:
Enkla väljare (välj element baserat på namn, id, klass)
Kombinatorväljare (välj element baserade på ett specifikt förhållande mellan dem)
Pseudoklassväljare (välj element baserat på ett visst tillstånd)
Pseudoelementväljare (välj och stil en del av ett element)
Attributväljare (välj element baserat på ett attribut eller ett attributvärde)
Den här sidan kommer att förklara de mest grundläggande CSS-väljarna.
Elementväljaren väljer HTML-element baserat på elementnamnet.
Här kommer alla <p>-element på sidan att vara mittjusterad, med en röd textfärg:
p
{
text-align: center;
color: red;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Id-väljaren använder id-attributet för ett HTML-element för att välja ett specifikt element.
Id:t för ett element är unikt på en sida, så id-väljaren är det brukade välj ett unikt element!
För att välja ett element med ett specifikt id, skriv ett hash-tecken (#), följt av elementets id.
CSS-regeln nedan kommer att tillämpas på HTML-elementet med id="para1":
#para1
{
text-align: center;
color: red;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Obs! Ett id-namn kan inte börja med en siffra!
Klassväljaren väljer HTML-element med ett specifikt klassattribut.
För att välja element med en specifik klass, skriv ett punkt (.) tecken, följt av klassnamn.
I det här exemplet kommer alla HTML-element med class="center" att vara röda och mittjusterade:
.center {
text-align: center;
color: red;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Du kan också ange att endast specifika HTML-element ska påverkas av en klass.
I det här exemplet kommer endast <p>-element med class="center" att vara röd och mittjusterad:
p.center {
text-align: center;
color: red;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
HTML-element kan också hänvisa till mer än en klass.
I det här exemplet kommer <p>-elementet att utformas enligt class="center" och till class="large":
<p class="center large">This paragraph refers to two classes.</p>
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>
</body>
</html>
Obs! Ett klassnamn kan inte börja med ett nummer!
Den universella väljaren (*) väljer all HTML element på sidan.
CSS-regeln nedan kommer att påverka alla HTML-element på sidan:
*
{
text-align: center;
color: blue;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Grupperingsväljaren väljer alla HTML-element med samma stil definitioner.
Titta på följande CSS-kod (h1-, h2- och p-elementen har samma stildefinitioner):
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}
Det blir bättre att gruppera väljarna för att minimera koden.
För att gruppera väljare, separera varje väljare med ett kommatecken.
I det här exemplet har vi grupperat väljarna från koden ovan:
h1, h2, p
{
text-align: center;
color: red;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
Väljare:
#id
Exempel:
#firstname
Exempelbeskrivning: Väljer elementet med id="firstname"
Väljare:
.class
Exempel:
.intro
Exempelbeskrivning: Väljer alla element med class="intro"
Väljare:
element.class
Exempel:
p.intro
Exempelbeskrivning: Väljer endast <p> element med class="intro"
Väljare:
*
Exempel:
*
Exempelbeskrivning: Väljer alla element
Väljare:
element
Exempel:
p
Exempelbeskrivning: Väljer alla <p> element
Väljare:
element,element,..
Exempel:
div, p
Exempelbeskrivning: Väljer alla <div>-element och alla <p>-element