CSS !viktig egendom


Innehållsförteckning

    Visa innehållsförteckning


Vad är viktigt?

Regeln !important i CSS används för att lägga större vikt till en egenskap/värde än normalt.

Faktum är att om du använder regeln !important kommer den att åsidosätta ALLA tidigare stilregler för det specifik egenskap på det elementet!

Låt oss titta på ett exempel:

Exempel

#myid {
  background-color: blue;
}
.myclass {
  
  background-color: gray;
}
p {
  background-color: red !important;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
#myid {
  background-color: blue;
}

.myclass {
  background-color: gray;
}

p {
  background-color: red !important;
}
</style>
</head>
<body>

<p>This is some text in a paragraph.</p>

<p class="myclass">This is some text in a paragraph.</p>

<p id="myid">This is some text in a paragraph.</p>

</body>
</html>


Exempel förklarat

I exemplet ovan. alla tre stycken får en röd bakgrundsfärg, även om ID-väljaren och klassväljaren har en högre specificitet. Regeln !important åsidosätter egenskapen background-color i båda fallen.


Viktigt om !viktigt

Det enda sättet att åsidosätta en !important regeln är att inkludera en annan !viktig regel om en deklaration med samma (eller högre) specificitet i källkoden - och här börjar problemet! Detta gör CSS-koden förvirrande och felsökningen blir svår, speciellt om du har en stor stilmall!

Här har vi skapat ett enkelt exempel. Det är inte särskilt tydligt, när man tittar på CSS-källkoden, vilken färg anses vara viktigast:

Exempel

 #myid {
  background-color: blue !important;
}
.myclass {
  
  background-color: gray !important;
}
p {
  background-color: red !important;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
#myid {
  background-color: blue !important;
}

.myclass {
  background-color: gray !important;
}

p {
  background-color: red !important;
}
</style>
</head>
<body>

<p>This is some text in a paragraph.</p>

<p class="myclass">This is some text in a paragraph.</p>

<p id="myid">This is some text in a paragraph.</p>

</body>
</html>


Tips: Det är bra att veta om !viktigt regel. Du kanske ser det i någon CSS-källkod. Använd den dock inte om du inte absolut måste.



Kanske en eller två rättvisa användningar av !viktigt

Ett sätt att använda !important är om du måste åsidosätta en stil som inte kan åsidosättas på något annat sätt. Detta kan vara om du är det arbetar på ett Content Management System (CMS) och kan inte redigera CSS-koden. Sedan kan du ställa in några anpassade stilar för att åsidosätta några av CMS-stilarna.

Ett annat sätt att använda !important är: Antag att du vill ha ett speciellt utseende för alla knappar på en sida. Här är knappar stylade med en grå bakgrundsfärg, vit text och lite stoppning och kant:

Exempel

 .button {
  background-color: #8c8c8c; 
  color: white;
  
  padding: 5px;
  border: 1px solid black; 
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #8c8c8c; 
  color: white;
  padding: 5px;
  border: 1px solid black; 
}
</style>
</head>
<body>

<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>

<p>Standard button: <a class="button" href="/html/">HTML Tutorial</a></p>

</body>
</html>


Utseendet på en knapp kan ibland ändras om vi lägger den inuti ett annat element med högre specificitet, och egenskaperna kommer i konflikt. Här är ett exempel på detta:

Exempel

 .button {
  background-color: #8c8c8c; 
  color: white;
  
  padding: 5px;
  border: 1px solid black; 
}
#myDiv a {
  
  color: red;
  background-color: yellow; 
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #8c8c8c; 
  color: white;
  padding: 5px;
  border: 1px solid black; 
}

#myDiv a {
  color: red;
  background-color: yellow;  
}
</style>
</head>
<body>

<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>

<div id="myDiv">
<p>A link text inside myDiv: <a href="/html/">HTML Tutorial</a></p>
<p>A link button inside myDiv: <a href="/html/" class="button">HTML Tutorial</a></p>
</div>

</body>
</html>


För att "tvinga" alla knappar att ha samma utseende, oavsett vad, kan vi lägga till !important regel till egenskaperna för knappen, så här:

Exempel

 .button {
  background-color: #8c8c8c !important; 
  color: white 
  !important;
  
  padding: 5px !important;
  border: 1px solid black !important; 
}
#myDiv a {
  
  color: red;
  background-color: yellow; 
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #8c8c8c !important; 
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important; 
}

#myDiv a {
  color: red;
  background-color: yellow;  
}
</style>
</head>
<body>

<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>

<div id="myDiv">
<p>A link text inside myDiv: <a href="/html/">HTML Tutorial</a></p>
<p>A link button inside myDiv: <a href="/html/" class="button">HTML Tutorial</a></p>
</div>

</body>
</html>