CODEWITHSUNDEEP
css
user145610
user145610

Reputation: 3025

How to extend css class

I have requirement to extend particular CSS style. For example, I'm using 3rd party DLL, which assign the CSS class style dynamically to particular control. I want to create a css class with same name in my asp.net project, Where both the styles from 3rd party DLL and my project CSS class style gets applied to control.

For say, 3rd party is having class by name 

.VerticalAlign
{
   vertical-alignment:center;
}

Now i create Class by name .VerticalAlign { color : #f3f3f3 }

When i apply the above class to control, I need to have both vertical-alignment and color applied to my control.

If it is not possible with same name, is there any possibility of creating css style with different class name which inherits properties from CSS Class defined in 3rd party dll.

Upvotes: 7

Views: 12195

Answers (2)

Brad Christie
Brad Christie

Reputation: 101614

You have it right; retain the same name, add the new properties and they should be applied. 

/* From DLL */
.foo { color: blue; }

/* Your Style */
.foo { text-align: center; }

/* --- Final outcome --- */
.foo {
  color: blue;
  text-align: center;
}

You may run in to problems with which takes precedence though (if they both have color which color style wins). e.g.

/* From DLL */
.foo { color: red; }

/* Your code */
.foo { color: blue; }

You'll either have to use !important (hack-ish) or specify a greater specificity (i.e. include the tagname or another class name or an ID).

Upvotes: 5

John Conde
John Conde

Reputation: 219834

The "C" in CSS stands for Cascading which means styles can add to or supercede preceding CSS rules. So your example of declaring the classs name again with the style you wish to extend on the original declaration is the proper way to do this.

Upvotes: 12

Related Questions