Content Selector multiple declarations CSS attribute
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 if a link (a) inside a list item (li) inside an unordered list (ul) inside a div with id "headwrap" has an href that contains "dev", the link will have background color # 034769 If the link has an href that contains "music", it will have a background color of # A61300 and so on.
However, I see that the rule only applies to "dev". If I reorder the CSS declarations (for example adding music first) it only applies to music.
I am testing in Firefox and Chrome, both do the same. Only the first applies.
Anyone have any idea why?
a source to share
Remove ;
at the end of these declarations like this (I formatted them internally, but simply removing them solves your problem):
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; }
You only use semicolons after declaring properties, for example:
selector { property: value; property2: value2; }
a source to share