CODEWITHSUNDEEP
javascriptjquerycss
WHITECOLOR
WHITECOLOR

Reputation: 26142

apply CSS style to particular elements dynamically

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.

Upvotes: 1

Views: 18951

Answers (5)

ewan.chalmers
ewan.chalmers

Reputation: 16235

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*/ }

Upvotes: 1

AbstractChaos
AbstractChaos

Reputation: 4211

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

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

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

Upvotes: 0

SVS
SVS

Reputation: 4275

Using CSS:

div p {your style goes here}

jquery:

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

Upvotes: 0

VisioN
VisioN

Reputation: 145398

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

Upvotes: 6

Related Questions