• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 340
  • Last Modified:

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!
0
Azra Lyndsey
Asked:
Azra Lyndsey
1 Solution
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
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)
0
 
Derek JensenCommented:
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
0
 
Azra LyndseyNerdAuthor Commented:
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?
0
 
haloexpertsexchangeCommented:
.class1 .listheader{}
.class2 .listheader{}
that should do the trick.
0
 
Azra LyndseyNerdAuthor Commented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now