CSS Attribute Content Selector multiple declarations
- by Dave
I have this in my CSS:
div#headwrap ul li a[href*="dev"] {background: #034769};
div#headwrap ul li a[href*="music"] {background: #A61300};
div#headwrap ul li a[href*="opinion"] {background: #b2d81e};
div#headwrap ul li a[href*="work"] {background: #ffc340};
So, my expected behavior is that where a link (a) within a list item (li) inside a unordered list (ul) inside a div with id "headwrap" has an href that contains "dev", the link will have a background color of #034769. If the link has an href that contains "music" it will have a background color of #A61300, and so on.
However, what I am seeing is that the rule is only correctly applied to "dev". If I reorder the CSS declarations (putting music first, for instance), it only gets applied to "music".
I'm testing in Firefox and Chrome, both are doing the same thing. Only the first one is applied.
Anyone have any ideas why?