Using CSS selectors, change the element wrapping text

Question

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?

Answer 1

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