asked on

Repurposing CSS Class Selectors

I don't know what this technique is called, I've only seen it used. It's a way to repurpose the same selectors with CSS.

For example if I create

 h1  { 
          font-size:18px; 
          color:#FFFFFF; 
          font-family:Arial, Helvetica;margin:0;
          padding:0;
}

h2  { 
          font-size:18px; color:#000000; 
          font-family:Arial, Helvetica; 
          font-weight:normal;margin:0;
          padding:0;
}

Open in new window

I can repurpose the h selectors with something like

.whatever h1 {
	color: #000; 
	font: 2.0em arial, sans-serif; 
	background-color: #fff3ea; 
	margin: 50px 0px 0px 50px; 
}

.whatever h2 {
	color: #000; 
	font: 1.7em bold arial, sans-serif; 
	background-color: #fff3ea; 
	margin: 25px 0px 25px 75px;
}

Open in new window

If H1 and H2 appear inside of a DIV called whatever, then they will assume those properties.

You can do this with ID tags and class tags but I can't for the life of me remember how this is done.

HELP!

Ishaan Rawat

You can do like this...

if under an ID

#ID h1{
     PROPERTIES...
}

Open in new window

If under an class

.class h1{
     PROPERTIES...
}

Open in new window

if under an tag

tag h1{
     PROPERTIES...
}

Open in new window

what this will do is h1 under the assigned tag/ID/class will have only the PROPERTIES in it...
and will overwrite the properties of the h1 set in the top of the page (Set for the whole page)

Derek Jensen

Also, if you're wanting to narrow it down to a tag w/multiple classnames assigned to it, you simply go

tag.clasname1.classname2 h1 {
    ...

Open in new window

or whatever...same with attribute selectors:

tag.class1.class2 h1.class3 a#myHrefID[href="http://www.thecompleteurl.com/to/target.html"] {

Open in new window

I've known CSS practically my whole life, and I never knew how to do this until just this year. :-P

Azra Lyndsey

ASKER

I think we're on the same page, we just need to get to the same paragraph.

By the way, does anybody know the proper or popular name for these "replacement" sort of techniques?

I have a class called listheader. In one DIV, which I'll call DIVclass1 I want listheader to have one set of properties. In another DIV, which I'll call DIVclass2 I want listheader to have a separate set of properties.

For example:

For DIVclass1 listheader might be:

.listheader  {
	margin: 0px 0px 25px -10px;
	font: 14px italics arial, sans-serif;
	color: #000;
	border: 1px solid red;
}

Open in new window

for DIVclass2 listheader might be:

.listheader  {
	margin: 0px 0px 25px 0px;
	font: 23px italics arial, sans-serif;
	color: #000;
	border: 1px solid red;
}

Open in new window

How would I express this in the CSS so that the listheader class will adopt different properties depending on it's parent container?

ASKER CERTIFIED SOLUTION

haloexpertsexchange

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Azra Lyndsey

ASKER

Boom. That does it right there. Man... I Don't know why I couldn't figure out what this was.

Thank you everybody for your responses. I learned a few more CSS tricks today.