Jump to content

"color" tag problem; should be trivial, but is driving me insane


Recommended Posts

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 by Corbeau
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...