how do you modify the actual css of a class rather than add a style to each element of that class? [duplicate]


Tags: javascript,jquery,css,google-chrome-extension

Problem :

This question already has an answer here:

I'm writing a google chrome extension to modify the look of tumblr for a project. I'm trying to make the posts to go down in multiple colums rather than just one, It is going... alright. Except as some of you might know tumblr loads new posts as you scroll down. Those new posts aren't getting the css I am adding to the class with JQuery. Does anyone have a suggestion as how to modify the actual contents of the css of the class in general rather than apply a style to all the elements with that class as what seems to be happening with .ccs()?

Here is my code at the moment:

$("#posts.posts>.post_container").css({
    "display":"inline-flex",
    "margin":"100px",

});

But only the posts that have been loaded on the page get the style..

Thank you for any help I can get!



Solution :

This should do the trick:

$('<style>', { 
  type: 'text/css',
  text: '#posts.posts>.post_container { display:inline-flex; margin:100px; }'
}).appendTo('head');

This appends a new style tag to <head>. The style in that newly appended tag will be applied to everything in the document (well except iframes).


    CSS Howto..

    How to add css in django Updateview or Create view form

    How to slide an element without removing it from DOM ( A psudo slide maybe)?

    how to give two different states in css?

    How to get Owl Carousel Owl-Page (dots) Responsive

    How use Append Jquery

    How to.. the middle div of three ever on center and if the navigator are resized

    how to add more specificity to css class .background-color-blue so it overrides default div's background color

    How to set CSS3 ::selection using Javascript

    Bootstrap How-to: checkbox should change text input value when selected/checked [closed]

    How to change the Color of dynamically created divs on click event, who are having same class?

    CSS select: how to count and select child of a specific class only?

    How to get the CSS-Code and save in a String?

    How can we avoid the shake when we hover over an element and set its border?

    How do I adjust triangle in css price tag to the right size

    How can I make the first letter push itself into the paragraph like a newspaper style

    Show and hide img

    How to make the progress bar with html css javascript

    How to reduce the length of the paragraph by dots(…)?

    How to stretch div height to fill parent div - CSS

    How to set opacity for background images using css?

    How to create DRY CSS when using transform & keyframes

    How to align elements properly using CSS

    How to apply different width stored in PHP to 3 identical DIVs (using same CSS)

    How to avoid text go below the thumbnail with css

    Dropdown list showing vertically in Internet explorer

    Jquery/CSS - how to clear a CSS-background set in another file I can't edit

    How to style elements within other elements with css?

    Creating a responsive drupal 7 slideshow

    how can i prevent to take input onkeypress anything other than alphanumeric

    How to display element on screen but not at the top of the screen in html/css?