Solved

How to write a sub class?

Posted on 2007-11-29
11
236 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
 
LVL 1

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 1

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 1

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 1

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Making my existing website "mobile friendly"... 10 36
CSS Font Arial Narrow 2 31
Download a website to hdd 2 52
To remove highlight from a "a href" 5 23
"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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.…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

863 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

23 Experts available now in Live!

Get 1:1 Help Now