CSS Attribute Content Selector multiple declarations

Question

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?

Answer 1

Remove the ; on the end of those declarations, like this (I've formatted them inside, but simply removing them solves your issue):

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; }

• Here's with the semicolons, not working

• Here's without the semicolons, working

You only use the semicolons after a property declaration, like this:

selector { property: value; property2: value2; }