4

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"?

Community
  • 1
  • 1
Chase Sandmann
  • 4,795
  • 3
  • 30
  • 42
  • [If you want to know HTML details, you're looking at the wrong spec](https://www.w3.org/TR/html5/rendering.html#replaced-elements). That said, there are other categories of elements other than replaced elements that disallow `:before` and `:after`. – zzzzBov Aug 04 '16 at 23:53
  • It appears that ability to use pseudo elements on elements doesn't strictly correspond with their formal classification of any kind. For example, all browsers now allow using them with the `hr` element, which is void element (even the styling of the W3C specs themselves uses this!). Also, most browsers allow pseudos for `img` that wasn't loaded, and Opera Presto allowed them for nearly everything. – Ilya Streltsyn Sep 08 '17 at 11:20

2 Answers2

7

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.

Leo
  • 13,428
  • 5
  • 43
  • 61
  • Why downvote? Was my answer wrong, or did I misunderstand the post? – Leo Aug 18 '16 at 15:15
  • "all void elements are self-closed, all non-void elements must have an end tag" is a bit oversimplified. There is no such thing as "self-closing" element in HTML (unlike X(HT)ML and SVG). It's true that void elements never have a closing tag, but there are non-void elements with optional closing tags (in which case they are closed implicitly). – Ilya Streltsyn Sep 08 '17 at 11:13
5

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>
Rounin
  • 27,134
  • 9
  • 83
  • 108
  • 3
    It appears you're missing ` – zzzzBov Aug 05 '16 at 00:13
  • 1
    Thanks, @zzzzBov, I've added `select` to the list above. – Rounin Aug 05 '16 at 00:33
  • 1
    @zzzzBov how are `` and `` considered replaced elements? – zer00ne Aug 05 '16 at 01:16
  • @zer00ne, they're not, but the question states "I would like to know **exactly** what elements I can and can't use pseudo elements like :before and :after on." which set `` and `` are included in. – zzzzBov Aug 05 '16 at 01:42
  • @zzzzBov I see, OP really needs a list of voids to avoid when using `:before/:after{content:..}`. – zer00ne Aug 05 '16 at 01:59
  • 2
    Where did you get this list from? – Piotr Dobrogost Nov 29 '16 at 08:53
  • Very late but: this is not correct, the spec *explicitly* excludes `input` elements like `select` from the list of replaced components. They instead call them "widgets": https://html.spec.whatwg.org/multipage/rendering.html#widgets – Leland Apr 05 '23 at 14:38