CODEWITHSUNDEEP
css
Sam Jones
Sam Jones

Reputation: 1528

Styles not cascading appropriately

I'm building a Wordpress theme, and I have these snippets in my style.css:

#content a:link, #content a:visited, #content a:hover, #content a:active {
  color: #fff;
}

.entry-utility a:link, .entry-utility a:visited, .entry-utility a:hover, .entry-utility a:active {
  background: #fff;
  color: #111;
}

The problem is that all links, even those within a <div class="entry-utility"> are being rendered with color: #fff". The background selector in the second snippet works fine, but not the color: selector. I've checked, and that is definitely the most granular color selector. What could be causing this?

I've tried commenting out the first one, which does cause the second one to work. As far as I can tell, it's just using the least granular selector for all the links in my theme.

Upvotes: 0

Views: 63

Answers (1)

jcubic
jcubic

Reputation: 66490

You must put color: #111; in rule that is more precise than #content a like this.

#content div.entry-utility a {
  background: #fff;
  color: #111;
}

Upvotes: 1

Related Questions