…not that I want to go back to straight HTML, because that's crap, but CSS is crap too.
After pulling my hair out for a bit and wondering why my styles weren't applying I found this helpful article on CSS specificity. Here's the good part:
Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)
(1,0,0,0) is the most specific, (0,0,0,1) is the least. When conflicts exist, the most specific wins. So, (0,0,1,0) always wins out over (0,0,0,15). Also if two are in conflict and have the same specificity, then the one declared last wins.
Good to note. Back to work!
2 comments
I'm glad you found my article helpful Paul. I'll disagree about css being crap, but I do understand why it causes confusion at times. I promise the more you use it, the easier it becomes to work with it.
No, thank you. Because of your article I was able to force the styles I wanted onto the elements on my page without resorting to an "important!" tag. I trumped the existing element + class selector combo with an ID selector. Worked like a charm.