Solved

How to write a sub class?

Posted on 2007-11-29
11
238 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
alert before form submission 6 40
Add box and text color changing for everything 1 24
div to fit another div 8 21
Checkout Page Input Field not aligned 1 20
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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 different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

785 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