Additional Pseudo-Elements

The ::outside pseudo-element was cut from css3-content and has not been tracked since. Other pseudo-elements concepts like wrapping a range of elements have been discussed from time to time. Additional pseudo-elements with more control over where they are positioned in the tree could help reduce markup clutter where elements are added to HTML for the sole purpose of CSS styling (Markup Clutter thread) (Thread discussing wrapping multiple elements).

Here is a list of possible pseudo-element additions that could be made in a future spec.

::outside was meant to create a pseudo element containing a single element

<!-- pseudo-element -->
  <div>markup content</div>
<!--end -->

A wrapper that contains a range of elements specified by indices. This could be specified as a child interval on a parent, or directly from an element with a number of siblings to contain.

<div id=parent>
  <div>1</div>
  <!-- pseudo-element containing the next three elements -->
    <div>2</div>
    <div>3</div>
    <div>4</div>
  <!--end -->
  <div>5</div>
</div>

A wrapper that contains a range of elements specified by selectors. In this case the declared range is from every <dt> element until the next <dt> following a <dd>

<dl>
  <!-- pseudo-element -->
    <dt> Last modified time </dt>
    <dd> 2004-12-23T23:33Z </dd>
  <!-- end -->
  <!-- pseudo-element -->
    <dt> Recommended update interval </dt>
    <dd> 60s </dd>
  <!-- end -->
  <!-- pseudo-element -->
    <dt> Editors </dt>
    <dd> Robert Rothman </dd>
    <dd> Daniel Jackson </dd>
  <!-- end -->
</dl>

A pseudo-element as a previous or next sibling to an element. In the case below you should be able to place this pseudo-element as following <h1> or previous to <p>

<h1>heading</h1>
<!-- pseudo-element -->
<p>paragraph</p>

Mechanisms for adding more than one pseudo-element in some or all of the existing pseudo-element schemes

<div>
  <!-- ::before pseudo-element 1 -->
  <!-- ::before pseudo-element 2 -->
  markup content
</div>

<!-- nesting ::outside pseudo-element -->
  <!-- nesting ::outside pseudo-element -->
    <div>markup content</div>
  <!-- end -->
<!-- end -->

<h1>heading</h1>
<!-- multiple sibling pseudo-elements -->
<!-- multiple sibling pseudo-elements -->
<!-- multiple sibling pseudo-elements -->
<p>paragraph</p>  

A wrapper that contains contiguous elements that share a selectable characteristic. In this case, instead of making three simple wrappers around each instance of class bar, it would group the first two bar elements together in one wrapper.

<div class=foo></div>
<!-- pseudo-element that wraps class bar -->
  <div class=bar></div>
  <div class=bar></div>
<!-- end -->
<div class=foo></div>
<!-- pseudo-element that wraps class bar -->
  <div class=bar></div>
<!-- end -->