0

I currently have:

<span> Hello </span>

I want to use CSS selectors to replace or wrap the text within the element with an

<h1>

without using anything but CSS selectors.

Is this possible?

cimmanon
  • 67,211
  • 17
  • 165
  • 171
My Name
  • 157
  • 2
  • 15
  • 1
    So you want to change the element to basically be `

    Hello

    `?     – michaelpri Oct 28 '15 at 21:43
  • 2
    No you can't change HTML from CSS. But you can make the span look like a heading by changing font size and weight... That is what CSS is perfect for. – GolezTrol Oct 28 '15 at 21:45
  • @GolezTrol though that wouldn't actually make it a heading, which would have quite serious implications for any blind document parser, such as an search engine or screen reader - it would be better to do this with JS, or by editing the HTML – Toni Leigh Oct 28 '15 at 21:51
  • If it needs to be a heading for screen readers, just make it a heading (server side). You can use JavaScript, but screen readers (and search engines) don't always respond well to JavaScript changing the DOM either. Many of them won't execute JavaScript at all. And the question is, should it *work* like a heading or should it only *look* like a heading? I think the answer currently isn't written clearly enough to determine what exactly is needed. – GolezTrol Oct 28 '15 at 21:57
  • @GolezTrol I would say if it needs to look like a heading, then it almost certainly is a heading and there'd be a lot of benefit in rendering it as such - the server would be the best place (or in the web component view layer) though I think the [robots are getting better at handling JS](http://a11yproject.com/posts/myth-screen-readers-dont-use-javascript/), it's just the CSS they won't bother with – Toni Leigh Oct 28 '15 at 22:01
  • But... this is all conjecture because the OP hasn't stated whether they want it to act like a heading or look like a heading. –  Oct 28 '15 at 22:02
  • @TinyGiant this is true, which is why it's a comment - though it's also something important for the OP to think about, H1 is important – Toni Leigh Oct 28 '15 at 22:03
  • I agree. The question is unclear. I'll retract my close vote if the OP clarifies their question. –  Oct 28 '15 at 22:04

1 Answers1

2

It is not actually possible to change the element in CSS, but you can simulate the effect of turning <span>Hello</span> into <h1>Hello</h1> in just CSS by adding properties to the span part of your CSS. You should do something like this.

span {
    display: block;
    font-size: 2em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

JSFiddle

As pointed out in the comments, this will not give the span the other properties of an h1 tag. To actually do this, you can do something like this in Javascript:

var mySpan = document.getElementById("span");
var myH1 = document.createElement("h1");
myH1.innerHTML = mySpan.innerHTML;
myAnchor.parentNode.replaceChild(myH1, mySpan);

JSFiddle

michaelpri
  • 3,521
  • 4
  • 30
  • 46
  • it's worth pointing out that this simulates the visual effect only, not the other effects of H1 which are actually quite important, such as for search engines and screen readers – Toni Leigh Oct 28 '15 at 21:52
  • @ToniLeigh I've edited that in, as well as the way to actually do it in JS. – michaelpri Oct 28 '15 at 22:08