Solved

How to write a sub class?

Posted on 2007-11-29
11
235 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:BobCSD
  • 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
 
LVL 1

Author Comment

by:BobCSD
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 1

Author Comment

by:BobCSD
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 1

Author Comment

by:BobCSD
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 1

Author Comment

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

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

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

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…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

757 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now