Which CSS selectors will be applied?

Asked Jul 13 '23 at 20:29

Active Jul 13 '23 at 20:41

Viewed 78 times

I have this CSS class:

.image-box:hover {
    -webkit-box-shadow: 8px 8px 8px red;
    box-shadow: 8px 8px 8px blue;
    -moz-box-shadow: 8px 8px 8px red;
    background-color: rgba(0, 0, 0, 0.08);
}

currently, box-shadow: 8px 8px 8px blue is winning. Is there any reason for that?

edited Jul 13 '23 at 20:31

MC Emperor

22,334
15
80
130

asked Jul 13 '23 at 20:29

user123456

2,524
7
30
57

2

The last declared one wins, assuming it's a valid CSS property. The `-moz-` vendor prefix will only apply to Firefox, so in other browsers it would be completely ignored. – Tyler Roper Jul 13 '23 at 20:36
I am using chrome @TylerRoper – user123456 Jul 13 '23 at 20:37
3

In Chrome, both `-webkit-box-shadow` and `box-shadow` are valid properties. The last declared one wins. – Tyler Roper Jul 13 '23 at 20:38
@TylerRoper thanks sir – user123456 Jul 13 '23 at 20:38
1

No browser has needed the webkit or moz prefix in many years. – Rob Jul 14 '23 at 08:23
@TylerRoper - not quite true, `!important` can override. – Rohit Gupta Jul 15 '23 at 05:51

Which CSS selectors will be applied?

0 Answers0