Question

I want a predefined class name which able to inherit css properties of immediate parent class/Id. let say

<div class="super">
   <input type="button" id="any_1" />
   <div class="sub">
      <input type="button" id="any_2" />
   </div>
</div>

Now i want to enclosed the <input type="button" ... /> with a common class & this class should inherits the css properties of immediate parent node.

e.g. suppose generic is common class and i am re-writing the above example

<div class="super">
   <div class="generic"> /*This should inherits the css properties of super class*/
      <input type="button" id="any_1" />
   </div>
   <div class="sub">
      <div class="generic"> /*This should inherits the css properties of sub class*/
          <input type="button" id="any_2" />
      </div>
   </div>
</div>

is there any way to do that if the generic is selector.

Answer 1

I posted two ways to return the class values of the input elements. EDIT: made a mistake, answer revised.

    //jquery
     $(function() {
        $('.generic').each(function() {
              var parentClass = $(this).parent().attr('class');
              $(this).addClass(parentClass);
        });
     });