Apply Css Style To Particular Elements Dynamically

I have a div with paragraphs inside:

...

...

I want dynamically to apply a certain style to paragraphs inside th

Solution 1:

Without using classes:

/* using CSS */divp {
    color: #ff0000;
}

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

With classes for <p> elements:

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

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

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

With classes for <div> element:

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

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

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

Solution 2:

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:

<divid='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*/ }

Solution 3:

Using CSS:

divp {your style goes here}

jquery:

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

Solution 4:

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

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

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

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

Solution 5:

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

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

​

.class1 {
 background-color:#F00;
}

.class1p {
    color:#00F;
}

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

.class2p {
 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