apply CSS style to particular elements dynamically

Question

I have a div with paragraphs inside:

<div>
  <p>...</p>
  <p>...</p>
</div>

I want dynamically to apply a certain style to paragraphs inside this div. Is it possible to do that without handling each paragraph element, but just attach somehow style to div element and all inside paragraphs would be affected?

Maybe with jquery.

It sounds for me like dynamical change of the stylesheet, is it possbile?

The right recommendation in answer's comments.

Thanks.

score 6 · Accepted Answer · answered Jun 26 '12 at 09:13

6

Without using classes:

/* using CSS */
div p {
    color: #ff0000;
}

// using jQuery
$("div p").css({
    color : "#ff0000"
});

With classes for <p> elements:

<!-- HTML -->
<div>
    <p class="mypar">...</p>
    <p class="mypar">...</p>
</div>

/* using CSS */
div p.mypar {
    color: #ff0000;
}

// using jQuery
$("div p.mypar").css({
    color : "#ff0000"
});

With classes for <div> element:

<!-- HTML -->
<div class="mydiv">
    <p>...</p>
    <p>...</p>
</div>

/* using CSS */
div.mydiv p {
    color: #ff0000;
}

// using jQuery
$("div.mydiv p").css({
    color : "#ff0000"
});

answered Jun 26 '12 at 09:13

VisioN

143,310
32
282
281

Thanks. I understand how to do it with jquery and css selector, but it will effect only existing paragraphs, and if I will dynamicly add them, new won't be affected - and I want them to be. It is possible with css stylesheet applied to the element, but is css stylesheet possible to change it dynamically? – WHITECOLOR Jun 26 '12 at 09:27
CSS will work fine for dynamically added elements. JavaScript case should be run again to attach styles to the new elements. – VisioN Jun 26 '12 at 09:29
So its not possible to do what I want? Change css style and automatically apply it all new added elements of the certain type? – WHITECOLOR Jun 26 '12 at 09:35
@WHITECOLOR: It is possible, but it's not usually required. Why can't you just use CSS to set the style in the first place, or run a `.css()` call whenever paragraphs are newly added? – thirtydot Jun 26 '12 at 09:41
1) because styles is dynamical 2) I'm trying to find a quicker (in terms of execution time) way to do that . – WHITECOLOR Jun 26 '12 at 09:47
@WHITECOLOR: Well, the quick way is just to append a `style` element, something like: `$('head').append('');`. For anything more complicated: http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript – thirtydot Jun 26 '12 at 09:52
Ah, yes, that might work out, thanks. Mark as the answer. Thanks. – WHITECOLOR Jun 26 '12 at 10:01

score 1 · Answer 2 · edited May 23 '17 at 11:48

1

With CSS you can define a child selector.

Building on that, you can dynamically add/remove a style class to your div and the style will apply to the children you specify in that selector.

Let's assume you want to apply this to a specific div, not any/every one. So give the target div an identifier:

<div id='foo'>
  <p>...</p>
  <p>...</p>
</div>

Adding a dynamic style with simple javascript:

document.getElementById('foo').style.className='dynamic_style'

The CSS (using combined id and class on a child selector):

div#foo.dynamic_style > p { /* your style definition*/ }

edited May 23 '17 at 11:48

Community

1
1

answered Jun 26 '12 at 09:15

ewan.chalmers

16,145
43
60

If i have to compose style during runtime? "font-size: 21px; margin: 12px", I don't have 'dynamic_style' defined in css file. – WHITECOLOR Jun 26 '12 at 09:44
You don't *define* the style dynamically, you *apply* the style dynamically. So, define the style statically in your CSS. Apply the style dynamically by adding className to document element with Javascript. – ewan.chalmers Jun 26 '12 at 09:52
Ok, thanks =) just in my case it's not possible to define style statically. – WHITECOLOR Jun 26 '12 at 09:59

score 0 · Answer 3 · answered Jun 26 '12 at 09:14

0

Using CSS:

div p {your style goes here}

jquery:

$('div p').css('property', 'value');

answered Jun 26 '12 at 09:14

SVS

4,245
1
23
28

score 0 · Answer 4 · answered Jun 26 '12 at 09:15

You can apply the CSS dynamically for this example of yours in this way:

function applyCSS()
{
    $("div > p").css({
        "background": "#fff",
        "color": "#000"
    });
}

Or, when you wanna apply this when the page loads:

$(document).ready(function(){
    applyCSS();
});

score 0 · Answer 5 · answered Jun 26 '12 at 09:19

Changing the css dynamically would be as simple as changing the top level class name for example

<div id="toggleme" class="class1">
  <p>...</p>
  <p>...</p>
</div>
<a id="test">Test</a>

.class1 {
 background-color:#F00;
}

.class1 p {
    color:#00F;
}

.class2 {
    background-color:#00F;
}

.class2 p {
 color:#F00;
}

then the jquery would be

$(document).ready(function() {
    $('#test').click(function() {
        $('#toggleme').toggleClass('class1');
        $('#toggleme').toggleClass('class2');
    });
});

Everything below the class will change to its new style :)

fiddle

apply CSS style to particular elements dynamically

5 Answers5

Linked