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 remendation in answer's ments.

Thanks.

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 remendation in answer's ments.

Thanks.

• javascript
• jquery
• css

5 Answers 5

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"
});

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 bined id and class on a child selector):

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

Using CSS:

div p {your style goes here}

jquery:

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

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();
});

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