10
div { position: relative; width: 100px; height: 100px; background: #f00; }
div::before { position: absolute; content: ''; width: 75px; height: 75px; background: #0f0; }
div::before::before { position: absolute; content: ''; width: 50px; height: 50px; background: #00f; }

Is my syntax wrong or is pseudo-element within pseudo-element not supported?

Note that I am aware about the ::after pseudo-element, though I need an actual element within another pseudo-element to achieve, e.g. where ::after does not suffice is:

div { position: relative; width: 100px; height: 100px; background: #f00; }
div::before { position: absolute; content: ''; right: 0; bottom: 0; width: 75px; height: 75px; background: #0f0; }
div::after { position: absolute; content: ''; left: 0; top: 0; width: 50px; height: 50px; background: #00f; }

Because ::after is relative to the element and not ::before.

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
Gajus
  • 69,002
  • 70
  • 275
  • 438
  • see this post http://stackoverflow.com/q/9007546/703717 – Danield Jul 25 '13 at 21:14
  • Because you are doing `absolute` positioning, there is no reason to not use `:after`, it just needs to have its position calculated in some respect to the position of `:before` (see http://jsfiddle.net/dBj3c/4/ which puts the `:after` where it would be if it was in fact possible to be a `:before:before` based on your code above). – ScottS Jul 26 '13 at 02:57

1 Answers1

16

Is my syntax wrong or is pseudo-element within pseudo-element not supported?

If I understand you correctly, it isn't possible. You can't chain multiple pseudo-elements as of Selectors Level 3 though it apparently may be allowed in the future.

Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector. Note: A future version of this specification may allow multiple pseudo-elements per selector.

Interestingly, you can chain the ::first-letter & ::before / ::after pseudo-elements with the placeholder pseudo element, e.g.

::-webkit-input-placeholder::first-letter {
color: purple;  
}

http://jsfiddle.net/k3yb6/1/

Adrift
  • 58,167
  • 12
  • 92
  • 90
  • “it will apparently be allowed once Selectors Level 4 is adopted by browsers” — Selectors level 4 doesn’t (currently) allow multiple pseudo-elements either: http://dev.w3.org/csswg/selectors4/#pseudo-elements. – Paul D. Waite Jul 25 '13 at 21:26
  • @Paul D. Waite: True, but considering it's a WD things may change by the time it's CR or further. Thanks for pointing that out though. – Adrift Jul 25 '13 at 21:28
  • indeedio. I think lines like that are sometimes put in W3C specs quite speculatively (i.e. not due to actual plans for implementing what they describe), but I don’t have any actual knowledge either way. – Paul D. Waite Jul 25 '13 at 21:59
  • 2
    @Paul, Adrift: It was explored as early as Generated Content level 3: http://www.w3.org/TR/css3-content/#nesting Needless to say, however, it never took off. Also notice how old the module is - if it's not pending a rewrite, it's probably abandoned. – BoltClock Jul 26 '13 at 05:15