How to write a sub class?

Say I have a text class:

.textA       {font: 10pt Arial}

.textAPadding       {padding-top: 8px;}

How can I write it so that .textAPadding inherits the .textA font and other stuff that I may want there?

I can't use this as an id="" because I want to use it more than once on a page.
LVL 2
Starr DuskkASP.NET VB.NET DeveloperAsked:
Who is Participating?
 
Göran AnderssonConnect With a Mentor Commented:
Here are a few more useful tips, besides combining classes:

http://css.maxdesign.com.au/selectutorial/selectors_class.htm
0
 
darron_chapmanCommented:
Maybe this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.textA {font: 12pt Arial
}
.textAPadding {padding-top: 8px;}
-->
</style>
</head>
 
<body>
<div class="textA"><p class="textAPadding">TEST</p></div>
</body>
</html>

Open in new window

0
 
chergenroederCommented:
I think it works like this...

textA.textAPadding {padding-top: 8px;}

you would use class="textAPadding" in your control, and it should inherit the .textA class
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
chergenroederCommented:
forgot the . infront of textA

.textA.textAPadding {padding-top: 8px;}
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
oh.

There's no way to just call one class that inherits the other. Calling two classes isn't really inheritance.
0
 
darron_chapmanConnect With a Mentor Commented:
Basically it is inheritance, but it's done in the html.  There's no way to define the inheritance in the style area.  Also, just as an FYI, you can embed DIVs and get the same effect.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.textA {
	font-family: Arial;
	font-size: 12pt;
}
.textAPadding {padding-top: 8px;}
-->
</style>
</head>
 
<body>
<div class="textA"><div class="textAPadding">TEST</div></div>
</body>
</html>

Open in new window

0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
That's what I've been doing. I was hoping for something more graceful.
0
 
Göran AnderssonCommented:
You can use more than one class in the tag to combine them:

<div class="textA textAPadding">
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
>> <div class="textA textAPadding">

Now that's what I'm talking about! This IS the accepted answer!

thanks GreenGhost!
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
>>.textA.textAPadding {padding-top: 8px;}

that just errors with an unexpected character sequence on the second dot.
0
All Courses

From novice to tech pro — start learning today.