Corbeau Posted November 24, 2014 Share Posted November 24, 2014 (edited) I have a strong desire to smash the desk with my forehead. So, I have this: .widget { color: #000000; border-top: 1px dotted #b3b3b3; font-size: 18px; font-size: 1.8rem; line-height: 1.6666666666em; margin: 0 0 1.6666666666em; overflow: hidden; padding: 1.6666666666em 0 0 0; font-style: italic; text-shadow: 1px 1px 4px;} The problem? Changing the colour doesn't work! I change the number to #ff0000 and it remains black. The rest of the block is good, I played with the font-style, shadow and size and all those work. To add insult to injury, exactly below it I have: .widget-title { color: #000000; font-size: 15px; font-size: 1.5rem; line-height: 1.3333333333em; margin: 0 0 1.3333333333em 0; text-transform: uppercase;} When I change colour here, it works. I checked spelling, changed the loaction of the text, copy/pasted from below, nothing. Any ideas? (The page is daliborperkovic.com, WordPress template is "Sundance", in case anyone thinks that may help, but please ignore the content, it's not finished yet) Edited November 24, 2014 by Corbeau Link to comment Share on other sites More sharing options...
Ingolme Posted November 24, 2014 Share Posted November 24, 2014 You have other selectors that have more precedence than the .widget class. For one, the .widget-title is a descendent of .widget, so it has higher precedence. Then there are <a> elements which have a color assigned already by CSS as well. If you want to update the color of the links in the widget: .widget a { color: #FF0000;} To update the color of the <h3> element in the widget, you can either use the .widget-title selector, or select h3 elements that are descendents of .widget: .widget h3 { color: #FF0000;} Finally, when two selectors have the same precendence (.widget h3 and .widget-title both point to the exact same element) the last one in the stylesheet takes precedence: // The text will be black because .widget-title is last.widget h3 { color: #FF0000;}.widget-title { color: #000000;} // The text will be red because .widget h3 is last.widget-title { color: #000000;}.widget h3 { color: #FF0000;} Link to comment Share on other sites More sharing options...
Corbeau Posted November 24, 2014 Author Share Posted November 24, 2014 Thanks. It helped. And the additional advice will come in handy Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now