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.

Answer 1

where you were using

div.title {}

use

h2 > span {}

or just

h2 {}

Answer 2

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>.

Answer 3

You can even assign both selectors to the same group:

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

Answer 4

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.

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 */
}

Answer 5

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.