Question

I have:

<style id=inlinestyle>
    .container {
        height: 0;
    }
    .container li {
        height: 10px;
    }
    .container li a {
                 color: pink;
    }
</style>

I would like to be able to target and edit `.container li a’ without losing the other styles i have.

 $('#inlinestyle').html('#poop { color: red }');

This won’t work as i will lose everything in there.

Worth mentioning that i’ll have an infinity amount of elements being created so inline styles aren’t an option.

Answer 1

This should be more or less what you’re looking for: http://jsfiddle.net/ZH9JW/2/

The problem with this is that it’s a very rigid regular expression; one space more or less, or no newline characters and the regular expression will fail. You can solve this ofcourse, but then you’re starting to build a CSS parser. I recommend against using my solution.

Maybe this is something you could use? It’s probably faster than $("#poop").css("color", "red"); if you’re creating so many elements, but a bit of a hack:

var newStyle = $("<style/>").html(".container li a { color: red }");
$("body").append(newStyle);

This style element should by the way ideally be in the DOM after your original style element, or have more specific CSS.