3

I need to change the color of all child elements (full depth) of the given selector.

At run time I do not know the exact HTML markup of the children, ... just the wrapping elements class.

I have tried the following, but to no avail

$('.cat_title *').each( function () { $(this).css('color', color ); });
$('.cat_title *').css('color', color+'!important' );
$('.cat_title *').css('color', color );

Any pointer in the right direction would be greatly appreciated.

Mohammad Naji
  • 5,372
  • 10
  • 54
  • 79
GeekKing
  • 311
  • 5
  • 11

2 Answers2

2

The first and third version of your code work to the extent that they add a style attribute to the elements, but this does not override a setting that has been set in a style sheet that has higher priority in the cascade.

The second version does not work, since jQuery does not support adding the !important specifier, see How to apply !important using .css()?

You might consider using code that adds a class to the elements, a class that is used in the style of the page, with !important if desired.

None of the approaches affects the color of text inside the element, if the text is not wrapped in an inner element (and such an effect is not requested for in your problem description).

Community
  • 1
  • 1
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
0
$('.cat_title').children().css('color', '#000000 !important');

Should do it.

Although, I detest use of the !important property.

Scott
  • 21,475
  • 8
  • 43
  • 55
  • Well it depends on the HTML really. The code above will work for one child deep. If you have children within chidlren it gets more difficult. http://jsfiddle.net/NotInUse/guNYT/3/ – Scott Feb 05 '12 at 08:03