Solved

How to write a sub class?

Posted on 2007-11-29
11
239 Views
Last Modified: 2008-02-01
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.
0
Comment
Question by:Starr Duskk
  • 4
  • 2
  • 2
  • +1
11 Comments
 
LVL 19

Expert Comment

by:darron_chapman
ID: 20375370
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
 

Expert Comment

by:chergenroeder
ID: 20375392
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
 

Expert Comment

by:chergenroeder
ID: 20375422
forgot the . infront of textA

.textA.textAPadding {padding-top: 8px;}
0
Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

 
LVL 2

Author Comment

by:Starr Duskk
ID: 20375423
oh.

There's no way to just call one class that inherits the other. Calling two classes isn't really inheritance.
0
 
LVL 19

Assisted Solution

by:darron_chapman
darron_chapman earned 100 total points
ID: 20375480
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
 
LVL 2

Author Comment

by:Starr Duskk
ID: 20375627
That's what I've been doing. I was hoping for something more graceful.
0
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20376018
You can use more than one class in the tag to combine them:

<div class="textA textAPadding">
0
 
LVL 2

Author Comment

by:Starr Duskk
ID: 20376690
>> <div class="textA textAPadding">

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

thanks GreenGhost!
0
 
LVL 29

Accepted Solution

by:
Göran Andersson earned 400 total points
ID: 20380432
Here are a few more useful tips, besides combining classes:

http://css.maxdesign.com.au/selectutorial/selectors_class.htm
0
 
LVL 2

Author Comment

by:Starr Duskk
ID: 20382978
>>.textA.textAPadding {padding-top: 8px;}

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

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

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

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question