trying to map a css class to an existing element

Question

My html cannot be changed, so I need to map a new css stylesheet to the existing elements on the page.

So I have this for a heading:

Existing:

<div class="title">Hello</div>

My new css for this page, has new css and markup but the html looks like:

<h2><span>Hello</span></h2>

i need to make the first snippet look exactly the same as the bottom <h2> snippet.

How can I do this w/o changing the html ?

Update

My HTML, that I cannot alter, is:

<div class=title>Hello</div>

I have a new stylesheet that I have to implement, but it has a style , but it only works on:

<h2><span>title</span></h2>

So I have to change the behavior of the class title, to mimic the output of what <h2><span> does.

Welcome to StackOverflow, Mediumbean.

Sampson
– Sampson

2010-01-21 16:51:18 +00:00
Commented Jan 21, 2010 at 16:51 — Sampson
– Sampson, Commented Jan 21, 2010 at 16:51

Glorfindel · Accepted Answer · 2019-06-06 10:03:55Z

3

Ah, you want .title to resemble h2 span, and not the other way around. My advice for you is to dowload Firebug for firefox (assuming you're using firefox) and inspect your h2 element to see what styles it presently has, and what selectors may already exist for it.

_{(source: sampsonresume.com)}

If you don't have firefox, you can get IEDeveloperToolbar for Internet Explorer, or use Chrome's built-in Element Inspector if you use Chrome. Any option for any browser will do.

Once you have this information, you'll be able to replicate those rules for .title { }.

/* According to Firebug for Firefox, we ought to use the following
   rules to mimic our h2 elements */
.title {
  background-image: url(../images/h2bg.png);
  background-position: left top;
  background-repeat: no-repeat;
  color: #FFFFFF;
  /* etc */
}

edited Jun 6, 2019 at 10:03

Glorfindel

22.8k13 gold badges97 silver badges124 bronze badges

answered Jan 21, 2010 at 16:33

Sampson

269k76 gold badges546 silver badges570 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Josh · Accepted Answer · 2010-01-21 16:21:28Z

0

where you were using

div.title {}

use

h2 > span {}

or just

h2 {}

answered Jan 21, 2010 at 16:21

Josh

6,2872 gold badges39 silver badges56 bronze badges

Comments

Skilldrick · Accepted Answer · 2010-01-21 16:27:37Z

0

h2 span will work fine if there's nothing else that matches that selector. Make sure you're using a reset style sheet so you don't get any silly styling from the browser for the <h2>.

answered Jan 21, 2010 at 16:27

Skilldrick

71.1k37 gold badges182 silver badges231 bronze badges

3 Comments

Ipsquiggle Over a year ago

Yes, every browser can (potentially) style the H2 differently. Don't trust the browser, define h2 completely for yourself. And then it's trivial to make this match div .title

BalusC Over a year ago

+1 for the selector suggestion, -1 for the reset stylesheet recommendation. That makes 0.

Skilldrick Over a year ago

@BalusC What's wrong with the reset stylesheet recommendation?

John Dunagan · Accepted Answer · 2010-01-21 16:30:58Z

0

You can even assign both selectors to the same group:

.title, h2 span { font-weight: bold; color: #0F0; ... }

answered Jan 21, 2010 at 16:30

John Dunagan

1,4653 gold badges18 silver badges30 bronze badges

Comments

Jon Benedicto · Accepted Answer · 2010-01-21 16:34:03Z

0

Where the new CSS defines the following rule:

h2 span { ... }

Update it to add the old markup:

h2 span, div.title { ... }

That will apply all of the styles that are being applied to the span that's inside the h2, to the div.

answered Jan 21, 2010 at 16:34

Jon Benedicto

10.6k3 gold badges31 silver badges31 bronze badges

Collectives™ on Stack Overflow

trying to map a css class to an existing element

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related