[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Repurposing CSS Class Selectors

Posted on 2012-09-20
5
Medium Priority
?
335 Views
Last Modified: 2012-09-21
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
Comment
Question by:Azra Lyndsey
5 Comments
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 38421084
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
 
LVL 9

Expert Comment

by:Derek Jensen
ID: 38422053
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
 
LVL 1

Author Comment

by:Azra Lyndsey
ID: 38422325
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
 
LVL 13

Accepted Solution

by:
haloexpertsexchange earned 2000 total points
ID: 38422958
.class1 .listheader{}
.class2 .listheader{}
that should do the trick.
0
 
LVL 1

Author Closing Comment

by:Azra Lyndsey
ID: 38423030
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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 …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

834 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