CSS-väljare


Innehållsförteckning

    Visa innehållsförteckning


En CSS-väljare väljer HTML-elementen du vill styla.


CSS-väljare

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.


CSS-elementväljaren

Elementväljaren väljer HTML-element baserat på elementnamnet.

Exempel

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>



CSS-id-väljaren

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.

Exempel

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!



CSS-klassväljaren

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.

Exempel

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.

Exempel

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.

Exempel

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!


CSS Universal Selector

Den universella väljaren (*) väljer all HTML element på sidan.

Exempel

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>



CSS-gruppväljaren

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.

Exempel

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>




Alla enkla CSS-väljare

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