Which CSS rule has priority in this case?

Question

Asked 5 years, 10 months ago

Viewed 56 times

-1

In the code below, what will be the color of the paragraph?

p { color:red; }
p { color:blue; }

red or blue?

3

cannot put together a small test to prove which color will be?

– Ricardo Pontual

2019/01/24 at 09:16
Why -1? I didn’t think it was fair... There are several questions about CSS rules but I haven’t seen one about repeating the same rule.

– Thiago Telles

2019/01/24 at 20:13
well, it wasn’t me who gave the downvote, but it was probably as I put in the comment, lacked only "a hangover" to forehead and see the result, even if it is an interesting doubt

– Ricardo Pontual

2019/01/25 at 01:10

1 answer

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.

by NoobSaibot • **9,554** points · Answer 1 · 2019-01-24T03:10:58+00:00

The CSS is interpreted from top to bottom, in this case the paragraph will be blue.

p { color: red; }
p { color: blue; }

<p>Teste</p>

if the declaration is used !important, the paragraph shall be red.

p { color: red !important; }
p { color: blue; }

<p>Teste</p>