Why, if CSS property is declared after, gets overriden by some declaration put before

Question

For example, in this CSS copy from Firefox Console:

.page-newsletter-sign-up-confirmation .main .webform-confirmation div {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;      // Line 20979
}
.newsletter-sign-up {                   // Line 21044
    -ms-flex-pack: distribute;
    justify-content: space-around;       // This one is overriden by Line 20979
    border: solid 1px #0a5793;
}

The SASS is:

.page-newsletter-sign-up-confirmation {
  .main {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .page-title-wrapper {
      @include hideH1();
    }
    .webform-confirmation {
      text-align: center;
      min-width: 800px;
      width: 950px;
      height: 360px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 5% auto 300px auto;
      background-color: white;
      @media (max-width: 1400px) {
        margin: 75px auto;
      }
      @media (max-width: 480px) {
        min-width: 0px;
        width: 100%;
        height: 500px;
        margin: 25px;
        justify-content: flex-start;
      }
      div {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        p {
          font-family: $font-light;
          font-size: 48px;
          font-weight: 300;
          line-height: 1;
          margin: 0;
          letter-spacing: -1px;
          @media (max-width: 480px) {
            font-size: 24px;
            position: absolute;
            width: 100%;
            top: 10%;
          }
        }
        hr {
          display: none;
          height: 5px;
          width: 450px;
          margin: 1em auto;
        }
        .links {
          display: block;
          height: 60px;
          @media (max-width: 480px){
            position: absolute;
            top: 30%;
          }
          a {
            @include blackButton;
            font-size: 12px;
            font-weight: 700;
            @media (max-width: 480px) {
              font-size: 14px;
              margin: 0 auto;
              display: block;
              width: 80%;
            }
          }
        }
      }
      //@supports (-ms-ime-align: auto) { /* Edge only due to bug https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15947692/ */
      //  .newsletter-sign-up {
      //    justify-content: space-around;
      //    border: solid 1px #0a5793;
      //  }
      //}
    }
  }
}

.newsletter-sign-up {
  justify-content: space-around;
  border: solid 1px #0a5793;
}

However, if I remove the .newsletter-sign-up at the end, and uncomment the other one, it correctly overrides the previous declaration. This happens both in Edge 18 and in Firefox 66.

So this leds me to think that more specific selector have precedence over less specific ones?

_more specific selector have precedence over less specific ones?_ absolutely, https://css-tricks.com/specifics-on-css-specificity/ — Fabrizio Calderan, Feb 21 '19 at 16:29

score 0 · Accepted Answer · answered Feb 21 '19 at 16:30

yes there is, there are several rules ( applied in this order ) : inline css ( html style attribute ) overrides css rules in style tag and css file. a more specific selector takes precedence over a less specific one. rules that appear later in the code override earlier rules if both have the same specificity.

Why, if CSS property is declared after, gets overriden by some declaration put before

1 Answers1