Priority in CSS when both id and tag are selected?

Question

If the priority of the id selector in css is the highest, why are the background colors of the two p's (test1 and test2) are same blue?

enter image description here

I have tried to change the order of selectors in the style code block and ways to express the id selector. like p #123 {} and #123 p {} .

I want to know the principle and how to use the id selector correctly in this case. Thank you very much.

score -2 · Accepted Answer · edited Mar 12 '23 at 13:19

-2

Your mistake is naming id. You must name id without numbers (change it to some word i.e test) and it works.

enter image description here

edited Mar 12 '23 at 13:19

mplungjan

answered Mar 12 '23 at 12:49

1

Please post code instead of images. You can use the `[<>]` snippet editor – mplungjan Mar 12 '23 at 12:52

score -2 · Answer 2 · answered Mar 12 '23 at 12:52

-2

Change the id to letters (or let it start with a letter) The first character of id cannot be a number

answered Mar 12 '23 at 12:52

Itzik

Mohit Singh · Answer 3 · 2023-03-12T12:45:17.317

-3

ID will be selected before the Tag "#example" will have priority in front of "button tag"

edited Mar 12 '23 at 12:45

answered Mar 12 '23 at 12:44

Mohit Singh

This is true, however it's clearly not working for the OP - which is why they are asking the question. – Rory McCrossan Mar 12 '23 at 12:48

3 Answers3