CSS !important Ιδιότητα

Πίνακας περιεχομένων

Τι είναι σημαντικό?

Ο κανόνας !important στο CSS χρησιμοποιείται για να προσθέσει μεγαλύτερη σημασία σε μια ιδιότητα/τιμή από το κανονικό.

Στην πραγματικότητα, εάν χρησιμοποιήσετε τον κανόνα !important, θα παρακάμψει ΟΛΟΥΣ τους προηγούμενους κανόνες στυλ για αυτό συγκεκριμένη ιδιότητα σε αυτό το στοιχείο!

Ας δούμε ένα παράδειγμα:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Παράδειγμα Επεξήγηση

Στο παραπάνω παράδειγμα. Και οι τρεις παράγραφοι θα έχουν κόκκινο χρώμα φόντου, παρόλο που ο επιλογέας ID και ο επιλογέας κλάσης έχουν υψηλότερη εξειδίκευση. Ο κανόνας !important παρακάμπτει την ιδιότητα χρώμα φόντου και στις δύο περιπτώσεις.

Σημαντικό Σχετικά με το !important

Ο μόνος τρόπος για να παρακάμψετε ένα !important κανόνας είναι να συμπεριλάβετε ένα άλλο !σημαντικό κανόνας για μια δήλωση με την ίδια (ή υψηλότερη) εξειδίκευση στον πηγαίο κώδικα - και εδώ ξεκινά το πρόβλημα! Αυτό προκαλεί σύγχυση στον κώδικα CSS και ο εντοπισμός σφαλμάτων θα είναι δύσκολος, ειδικά αν έχετε ένα μεγάλο φύλλο στυλ!

Εδώ έχουμε δημιουργήσει ένα απλό παράδειγμα. Δεν είναι πολύ σαφές, όταν κοιτάζετε τον πηγαίο κώδικα CSS, ποιο χρώμα θεωρείται πιο σημαντικό:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Συμβουλή: Είναι καλό να γνωρίζετε για το !important κανόνας. Μπορεί να το δείτε σε κάποιον πηγαίο κώδικα CSS. Ωστόσο, μην το χρησιμοποιήσετε εκτός και αν πρέπει οπωσδήποτε.

Ίσως μία ή δύο δίκαιες χρήσεις του !important

Ένας τρόπος για να χρησιμοποιήσετε το !important είναι εάν πρέπει να παρακάμψετε ένα στυλ που δεν μπορεί να παρακαμφθεί με κανέναν άλλο τρόπο. Αυτό μπορεί να είναι αν είστε εργάζεται σε ένα Σύστημα Διαχείρισης Περιεχομένου (CMS) και δεν μπορεί να επεξεργαστεί τον κώδικα CSS. Στη συνέχεια, μπορείτε να ορίσετε ορισμένα προσαρμοσμένα στυλ για να παρακάμπτουν ορισμένα από τα στυλ CMS.

Ένας άλλος τρόπος για να χρησιμοποιήσετε το !important είναι: Ας υποθέσουμε ότι θέλετε μια ιδιαίτερη εμφάνιση για όλα τα κουμπιά σε μια σελίδα. Εδώ, τα κουμπιά είναι διακοσμημένα με γκρι χρώμα φόντου, λευκό κείμενο και κάποια συμπλήρωση και περίγραμμα:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Η εμφάνιση ενός κουμπιού μπορεί μερικές φορές να αλλάξει αν το βάλουμε μέσα σε άλλο στοιχείο με υψηλότερη εξειδίκευση και οι ιδιότητες έρχονται σε σύγκρουση. Εδώ είναι ένα παράδειγμα αυτού:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Για να "αναγκάσουμε" όλα τα κουμπιά να έχουν την ίδια εμφάνιση, ανεξάρτητα από το τι, μπορούμε να προσθέσουμε το !important κανόνας στις ιδιότητες του κουμπιού, ως εξής:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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