Home>

This is a question about the order of CSS.

I was wondering because it happens occasionally, but if I install and write a custom CSS plug-in (I use Simple Custom CSS) with word press, it will not be reflected well there is.

The descriptions are not reflected when they match, but are often reflected when the order of descriptions is reversed.

The CSS below is a description that correctly reflects the former and a description that does not reflect the latter.

Because responsive design descriptions are frequently added in custom CSS, when new .aaa is described, it is added under @media (max-width: 970px) that has been described previously. There are many things to do,
If i do so, it will be described in the latter order of CSS below, and it will not be reflected well.

Does this mean that the CSS description is in order?

Because i am a beginner, it would be helpful if you could teach me a lot of ignorance.
Thank you very much.

.aaa {
padding: 16.0px 14.0px 14.0px;
color: # 1C2D62;
background: #fffcea;
border: solid 4px # 1C2D62;
margin-bottom: 20px;
font-size: 20px;
}
@media (max-width: 970px) {
.aaa {
font-size: 16px;
}
}
@media (max-width: 970px) {
.aaa {
font-size: 16px;
}
}
.aaa {
padding: 16.0px 14.0px 14.0px;
color: # 1C2D62;
background: #fffcea;
border: solid 4px # 1C2D62;
margin-bottom: 20px;
font-size: 20px;
}
  • Answer # 1

    CSS basically reflects the description at the bottom (latest).
    So, in the case of the lower one, the font size set in responsive is overwritten by the lower setting, so the font size is not reflected.
    ... What about font size that doesn't apply?

  • Answer # 2

    Order matters. If there is the same specification written before and after an element, "After" takes precedence.

    In the case of presentation, if the font size 20px is "screen width 970px or less", it will be changed to 16px, but in the case of presentation, even if "screen width 970px or less is specified as 16px" It will be changed to 20px with some ".aaa".


    (Add)
    There was already the same answer after posting. I'm sorry.

Related articles