List of Replaced Elements

Question

In this question and other places online, "replaced elements" that have special properties are referenced, usually citing examples of <img> tags, <svg> tags and the like. However, I'm trying to style some elements that are the output of a third-party library that I'm not in control of and I would like to know exactly what elements I can and can't use pseudo elements like :before and :after on.

Even the actual documentation on replaced elements doesn't have an exact list. Which elements are "replaced"?

Answer 1

You are looking for the wrong spec.

Replaced elements are those, whose content will be replaced in the document preparation phase. Before the replacement happens, browser (or officially, user agent) could not know the exact dimensions. For example, the content of img element will be replaced with the image defined as its src attribute. And only after replaced, browser could know how wide and high it is, then try to render it in the right position.

Please note that, even :before and :after could be a replaced element, depending on the content property defined in CSS.

I've seen a lot of times people get confused with replaced elements and void elements, because the replaced elements we use the most, such as img and input, are also void elements. Void elements are actually what you should look for.

Quote from the w3c spec:

A void element is an element whose content model never allows it to have contents under any circumstances. Void elements can have attributes.

The contents stated in above quote mean both elements and pseudo elements, in markup, not rendered document.

The following is a complete list of the void elements in HTML:

• area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

It's easy to determine whether an element is void or not - all void elements are self-closed, all non-void elements must have an end tag.

Answer 2

In html, Replaced Elements are those which refer to content which already possesses intrinsic dimensions:

List of Replaced Elements:

• <applet>
• <audio>
• <br>
• <button>
• <canvas>
• <embed>
• <iframe>
• <img>
• <input>
• <math>
• <object>
• <select>
• <svg>
• <textarea>
• <video>