increment an html element's attribute value using css?

Question

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!

Indeed. Was wondering if there are any method to sum up those values. — Ivin
– Ivin, Commented Aug 11, 2012 at 16:12

jaypeagi · Accepted Answer · 2012-08-11 17:56:04Z

2

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

edited Aug 11, 2012 at 17:56

answered Aug 11, 2012 at 16:17

jaypeagi

3,14120 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Edward Ruchevits · Accepted Answer · 2012-08-11 17:48:13Z

0

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.

edited Aug 11, 2012 at 17:48

answered Aug 11, 2012 at 16:14

Edward Ruchevits

6,69612 gold badges54 silver badges87 bronze badges

Comments

Joe C. · Accepted Answer · 2012-08-11 16:16:05Z

0

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.

answered Aug 11, 2012 at 16:16

Joe C.

1,53811 silver badges14 bronze badges

Collectives™ on Stack Overflow

increment an html element's attribute value using css?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related