css class override not working for just one specific class-CodePudding

In my Wordpress CSS I have added a few extra classes. Depending on screen widht I want to override these. This works fine, except for one class. I am at the end of my wits what could be the cause. Here's the code excerpt (class "field-space" is being successfully overriden, class "formflex" is not)

.formflex {
   display: flex;
   background-color:yellow;
}

.field-space {
   padding-right: 20px;
   background-color:lightgrey
}

@media only screen and (max-width: 767px) {

    .formflex {
       ! flex-direction : column;
     background-color:blue;
    }

.field-space {
    padding-right: 60px;
    background-color:green;
}
}

The background-color specification is there for testing whether things work. The color of elements with a field-space dev are changing, the ones for formflex are not. Am I missing some typo (checked a thousand times)?

Tested with Firefox and Chrome.

CodePudding user response：

https://developer.mozilla.org/en-US/docs/Web/CSS/important

A ! delimiter followed by the important keyword marks the declaration as important. The !important flag alters the rules selecting declarations inside the cascade. A declaration that is not important is called normal.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element. The specificity algorithm calculates the weight of a CSS selector to determine which rule from competing CSS declarations gets applied to an element.

Just to make it clear because your words showed some confusion, you are overriding the specificity of a single css attribute and not the whole class. Those are ruleset applied to elements responding to a given selector. By the way you were doing it wrong...

...and since here you don't need to override any specificity, the !important clause is not needed.

As a side note, .field-space element needs the height set when displayed vertically.

.formflex {
  display: flex;
  background-color: yellow;
}

.field-space {
  padding-right: 20px;
  background-color: lightgrey
}

@media only screen and (max-width: 767px) {
  .formflex {
    flex-direction: column;
    background-color: blue;
  }
  .field-space {
    padding-right: 60px;
    background-color: green;
    line-height: 1em;
    height: 1em;
  }
}

.formflex > *:not(.field-space){
  border: solid 1px gray;
}

<div >
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div ></div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>