CODEWITHSUNDEEP
htmlcss
Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

Access Style property through CSS

Is there anyway i can access the style property for the particular div? For example, I have a code like below

<div class="testing" style="background-color:#ff00ff;">
This is my test Paragraph
</div>

I want to apply some other background color for this division. But i don't want to modify the class "testing", because it is being used in some other places also. Is there anyway using CSS only to access the style property and apply my new color?

Upvotes: 0

Views: 120

Answers (5)

hp4k
hp4k

Reputation: 356

I think attribute selectors may be what you are looking for:

div.testing[style="background-color:#ff00ff;"] {
    background-color: new_color !important;
}

Upvotes: 2

bhavya_w
bhavya_w

Reputation: 10077

"Think it is a dynamic code. How can i add new class without using javascript? "

The Answers is You cannot add a new class using CSS dynamically/ runtime. The only way to do it is by using javascript/jquery:-

HTML:
    <div id="mydiv" class="testing" style="background-color:#ff00ff;">
    This is my test Paragraph
    </div> 

JQUERY: 

    $('#mydiv').css('background','#ColorCode');

This way your class also wont change( since its being used in other places) and you can change the background also.

Can i ask why you are trying to achieve this using CSS?

Upvotes: 0

Friedrich
Friedrich

Reputation: 2290

You can access the elements with this certain style like this:

.testing[style="background-color:#ff00ff;"] {
    /* put your attributes here*/
}

but you cannot change the background-color attribute since this one has a higher priority in the html.

see this:

.testing[style="background-color:#ff00ff;"] {
    background-color: #00f; /* not possible */
    margin: 30px; /* possible */
}

what you can do is add a new attribute to your html like this:

<div class="testing" changecss="true">
    This is my test Paragraph
</div>

and add this css:

.testing[changecss="true"] {
    background-color: #00f;
}

See the JsFiddle as well.

Upvotes: 0

Dan Blows
Dan Blows

Reputation: 21174

You need to make a style that has higher priority than the style. You could use the !important attribute to do that:

<div class="testing" style="background-color:#ff00ff;background-color:red !important;">

Big important caveat: whatever it is you're trying to do doesn't sound like a good idea, because the code will be very difficult to maintain. What is the underlying problem that you are trying to solve?

Upvotes: 0

dfsq
dfsq

Reputation: 193261

You can create another class and overwrite necessary property:

.testing-active {
    background-color: red;
}

and use it like this:

<div class="testing testing-active"></div>

Upvotes: 0

Related Questions