CODEWITHSUNDEEP
css
Ivin
Ivin

Reputation: 4815

increment an html element's attribute value using css?

Would it be possible to create a css class/id that would add a value(say, padding for example) to another class's same attrib value?

Let me try to put it down more clearly.

.someClass{
padding: 20px;
}

.thickenMe{
padding: 5px;
}

And when i apply these classes as follows,

<div class='someClass thickenMe'>
<!--planning to beef up this div-->
</div>

This div's net padding should become 25px.

Would it be possible using css only? Its just a thought!

Upvotes: 1

Views: 365

Answers (3)

jaypeagi
jaypeagi

Reputation: 3141

This is not possible using pure CSS.

You could, however, write a CSS clause for each element that can be "thickened" like so:

.someClass{
padding: 20px;
}

.someClass.thickenMe{
padding: 25px;
}

Another alternative would be to use margin as well as padding, like so:

.someClass{
padding: 20px;
}

.thickenMe{
margin: 5px;
}

That might not be possible though, depending on your other CSS.

The easiest solution, although not pure CSS, would be to use JavaScript. Here is an example using JQuery:

var prevPad = $('.thickenMe').css('padding').replace("px", "");
prevPad =  parseInt(prevPad);
$('.thickenMe').css('padding', prevPad + 5 + "px");​

Upvotes: 2

Edward Ruchevits
Edward Ruchevits

Reputation: 6696

No. You need to use client-side scripting (i.e. JavaScript) if you want to change attributes dynamically. Or, if you just want to define styles by compiling from some dynamic sources, try LESS or SASS.

Upvotes: 0

Joe C.
Joe C.

Reputation: 1538

Unfortunately, no. You could get this sort of functionality by using a CSS-processor like LESS, which gives you variables, or you could handle it through client-side scripting (easiest with jQuery), but native CSS simply doesn't work that way. Classes override each other when they specify the same attribute; they don't supplement each other.

Upvotes: 0

Related Questions