-1

So let's say I have a DIV tag:

<div class="testHead"></div>

I want to for all intents and purposes be visually identical to the <h1> tag for font look and feel, because there'd be some issues actually using the <h1> tag. Is there an easy way to set this up in CSS? HTML5/CSS3 is perfectly ok here.

Josef Engelfrost
  • 2,955
  • 1
  • 29
  • 38
tekiegreg
  • 1,667
  • 6
  • 25
  • 41
  • What sort of issues are you experiencing with using the

    tag?

     – droo46 May 11 '15 at 19:32
  • Aside from the semantic meaning heading elements have, most browsers simply style the font to be large and bold, and that can easily be altered with a CSS reset. Are you having an issue changing the font properties via CSS? – j08691 May 11 '15 at 19:33
  • Elements come preloaded with CSS. You can find these in your browsers developer tools. You can create a class for all the `

    ` CSS. However, I kind of miss the point in doing something like this when an element already comes preloaded.

     – Drew Kennedy May 11 '15 at 19:33
  • 1
    If you fully emulate the CSS for an `

    ` on a `
    `, it will probably have all the same issues that you are encountering when just using a plain old `

    `

     – markasoftware May 11 '15 at 19:34
  • Well the issue is that we have a server-side script that renders HTML using the

    tag all over the page to render in the proper font, and then another script nearby that renders HTML using the

    tag that we now want to look differently. Rather than trying an overriding the styles for H1 and wreck both, I'm trying to figure out a way to seperate the styles completely to accommodate future changes, one looking like

    for now and the other one just slightly different from

    .

     – tekiegreg May 11 '15 at 19:44
  • For the sake of avoiding jQuery and JavaScript for something that can easily be accomplished with CSS alone, refer to `user20561`'s second portion of his or her answer. – Drew Kennedy May 11 '15 at 19:48

2 Answers2

1

The short answer is: No, you can't emulate the style of another element in CSS. A few alternatives:

  • Use javascript/jQuery to copy all the computed styles of another element. See this question for more information: Can jQuery get all CSS styles associated with an element?
  • Manually copy the computed styles from the developer view ("Inspect Element") of an element into the new element's css.
Community
  • 1
  • 1
Imashcha
  • 314
  • 1
  • 9
  • 1
    I'm not sure I understand what you mean by "you can't emulate the style of another element in CSS". – j08691 May 11 '15 at 19:59
  • I'm using the question author's terminology: "emulate" means (I believe) to copy all styles of one element to another one. – Imashcha May 11 '15 at 20:04
0

Old question, but ...

Well, you could, kindof - in your CSS, you could add the .testHead to your h1 selector:

h1, .testHead {properties: here}

Or, more elegantly - if you have control over your markup, as well:

h1, .h1 {properties: here}

and in your HTML:

<div class="testHead h1"></div>

Valentin Born
  • 21
  • 5