CSS!important?

25.02.2023, 14:16 
@media (max-width: 750px) {
  .skills{
    h2{
      font-size: 1.5rem !important;
    }
    p{
      font-size: 1rem !important;
    }
  }
}


  .skills {
    div {
      width: calc(50% - 20px);
      background-color: rgb($ganzhell, 0.3);
      h2 {
        font-family: "itim";
        color: $dunkel;
        font-size: 2rem;
      }
      p {
        font-size: 1.25rem;
        margin: 5px 0 10px 0;
        color: $ganzhell;
      }
    }
  }

4 Antworten

Babelfish
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webentwicklung, Programmieren & Softwareentwicklung
24.02.2023, 20:53

Wenn die Spezifität im Media-Query nicht kleiner ist als bei der vorherigen Definition, dann brauchst du auch kein !important. Ohne deinen Code zu kennen, kann ich dir aber nicht sagen, wo dein Fehler liegt.

Allerdings ist es für so einen Fall auch nicht unbedingt dramatisch, wenn man hier wirklich mal !important nutzt.
Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.
verreisterNutzer  25.02.2023, 14:17

Ich habe es jetzt ergänzt

Babelfish  25.02.2023, 14:28
@verreisterNutzer

Wie ich dir schon sagte, musst du auf die CSS-Spezifität achten. In deiner „normalen“ Definition hast du:

.skills div h2

Das entspricht der Spezifität 0 1 2

Im Media-Query hast du:

.skills h2

Die Spezifität ist mit 0 1 1 damit geringer und verliert gegen die vorherige Definition.

Also schreib es so:

@media (max-width: 750px) {
  .skills {
    div {

Dann klappt es auch ohne !important. Siehe auch:

https://kulturbanause.de/blog/css-spezifitat/
Baerenheini
24.02.2023, 22:05

Auf Anhieb würden mir da zwei Sachen einfallen.

  1. Du benutzt den Media-Query falsch. Wenn ein bestimmter Viewport von der Media-Query wahr ist, wird der Code einfach überschrieben ohne die Notwendigkeit von !important. Schau einfach mal bei w3schools vorbei
  2. Die Art wie du elemente in deinem css code selektierst unterscheidet sich in unterschiedlichen mediaquerys und wird deshalb erst mit dem zusatz !important überschrieben.

als Beispiel:

im Hauptcode verwendest du folgende Art:

  #divid.divclass{
  background-color: black;
  }

In einer Mediaquery verwendest du aber nur:

.divclass{
  background-color: red;
 }

Es mag so aussehen als wäre beides gleichwertig, allerdings beschreibt die erste Variante mit #divid dieses Element genauer, weshalb der Hintergrund im Beispiel schwarz bleibt.

verreisterNutzer  25.02.2023, 14:18

Ich habe jetzt ein Beispiel von meinem SCSS eingefügt
EinAlexander
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webseite, CSS
25.02.2023, 14:42
Wie kann ich das ändern oder wie löse ich es ohne important?

Indem du die Reihenfolge der Regeln vertauschst. Also im Stylesheet so schreibst:

.skills {
  ...
  }
@media (max-width: 750px) {
  .skills {
    ... 
  }
}

anstatt so wie du es machst:

@media (max-width: 750px) {
  .skills {
    ... 
  }
}
.skills {
  ...
  }

Alex
NackterGerd
25.02.2023, 14:39

Das ist nicht normal

Dann hast du viele die Reihenfolge der Styles falsch?

Würde vielleicht der Wert woanders überschrieben.

Kannst du ja leicht prüfen im Browser z.b. Firefox im Develover Mode
Woher ich das weiß:Berufserfahrung