What are the priorities among CSS selectors

Question

CSS Question: If two different selectors apply to an element, who wins?

I know this shouldn\'t happen, but I want to tweak a legacy application, and the CSS is getti

Answer 1

Order in the CSS file only matters if the selectors share the same specificity.

For more on selector specificity: Andy Clarke penned Specificity Wars which is the best overview of how they work.

Answer 2

The priority between selectors is controlled by how specific they are. More specific selectors win over less specific.

If two selectors are equally specific, the later one wins over the first one.

There are three levels of specificity, id, class and element. So #elem wins over .elem as an id is more specific. .elem .cont wins over .elem as it has more selectors at the same level.

Read more under "What happens when conflicts occur?" at Selectutorial.

Answer 3

1. !important
2. inline style
3. #id
4. class
5. tag