CODEWITHSUNDEEP
htmlcss
user255963
user255963

Reputation: 131

trying to map a css class to an existing element

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.

Upvotes: 1

Views: 1201

Answers (5)

Sampson
Sampson

Reputation: 268344

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.

alt text
(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 */
}

Upvotes: 3

Jon Benedicto
Jon Benedicto

Reputation: 10582

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.

Upvotes: 0

John Dunagan
John Dunagan

Reputation: 1465

You can even assign both selectors to the same group:

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

Upvotes: 0

Skilldrick
Skilldrick

Reputation: 70819

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

Upvotes: 0

Josh
Josh

Reputation: 6322

where you were using

div.title {}

use

h2 > span {}

or just

h2 {}

Upvotes: 0

Related Questions