Home Specs Ideas Testing About
You are here: CSS Working Group Wiki » Ideas and Resolutions » Additional Pseudo-Elements

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
ideas:pseudo-elements [2012/01/12 08:21] – Removed the lone-<dt> pseudo in #3, since that doesn't define a valid item in HTML. tabatkinsideas:pseudo-elements [2017/01/27 12:16] (current) – bkemper
Line 1: Line 1:
 ====== Additional Pseudo-Elements ====== ====== 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 ([[http://lists.w3.org/Archives/Public/www-style/2011Dec/0463.html|Markup Clutter thread]]) ([[http://lists.w3.org/Archives/Public/www-style/2010Jul/0160.html|Thread discussing wrapping multiple elements]]). See also: [[http://lists.w3.org/Archives/Public/www-style/2012Feb/0193.html|cross-post from whatwg about anonymous grouping]].
  
-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 ([[http://lists.w3.org/Archives/Public/www-style/2011Dec/0463.html|Markup Clutter thread]]) ([[http://lists.w3.org/Archives/Public/www-style/2010Jul/0160.html|Thread discussing wrapping multiple elements]]).+One issue is that there is very little scripting access to pseudo-elements currently. If we end up relying on pseudo-elements for wrappers or for inserting presentational boxes there should be a way to attach event handlers to pseudo-elements: [[http://lists.w3.org/Archives/Public/www-style/2012Feb/0626.html|post with use cases for interaction in layout]] 
 + 
 +Another issue is how to provide a way to override pseudo-element styling. If one stylesheet defines a pseudo-element wrapper with some styling, how can a second stylesheet import the first and override the wrapper's style?
  
 Here is a list of possible pseudo-element additions that could be made in a future spec. Here is a list of possible pseudo-element additions that could be made in a future spec.
Line 8: Line 11:
 === 1. Simple wrapping of a single element === === 1. Simple wrapping of a single element ===
  
-::outside was meant to create a pseudo element containing a single element +In CSS3 Content, ''::outside'' was meant to create a pseudo element containing a single element. 
- +<code css> 
-  <!-- pseudo-element --> +div::outside {border: thick solid green;} 
-    <div>markup content</div> +</code> 
-  <!--end -->+<code html> 
 +<!-- pseudo-element --> 
 +  <div>markup content</div> 
 +<!--end --> 
 +</code>
  
 === 2. Complex wrapping of an element range === === 2. Complex wrapping of an element range ===
  
 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. 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.
 +<code css>
 +#parent/*>*/::wrap(2,5) {border: thick solid green;} /* child interval */
 +</code>
 +<code css>
 +#parent>:nth-child(2)::wrap(3) {border: thick solid lime;} /* sibling interval */
 +</code>
 +<code html>
 +<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>
 +</code>
  
-  <div id=parent> +If the second idea (starting from the first element to be wrapped, and specifying how many elements to include in the wrapping) is adopted, it could be used to solve #1 as well, by allowing an appropriate default value to wrap only the single element.  That is, something like ''div::wrap'' could be equivalent to ''div::wrap(1)'', which wraps only the single ''div''.
-    <div>1</div> +
-    <!-- pseudo-element containing the next three elements --> +
-      <div>2</div> +
-      <div>3</div> +
-      <div>4</div> +
-    <!--end --> +
-    <div>5</div> +
-  </div>+
  
 === 3. Complex wrapping of selector range === === 3. Complex wrapping of selector range ===
  
-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> +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>. 
- +<code css> 
-  <dl> +dl::wrap(:matches(:first-child, dt), dd+dt) {border: thick solid green;} 
-    <!-- pseudo-element --> +</code> 
-      <dt> Last modified time </dt> +<code html> 
-      <dd> 2004-12-23T23:33Z </dd> +<dl> 
-    <!-- end --> +  <!-- pseudo-element <di> --> 
-    <!-- pseudo-element --> +    <dt> Last modified time </dt> 
-      <dt> Recommended update interval </dt> +    <dd> 2004-12-23T23:33Z </dd> 
-      <dd> 60s </dd> +  <!-- end </di> --> 
-    <!-- end --> +  <!-- pseudo-element <di> --> 
-    <!-- pseudo-element --> +    <dt> Recommended update interval </dt> 
-      <dt> Editors </dt> +    <dd> 60s </dd> 
-      <dd> Robert Rothman </dd> +  <!-- end </di> --> 
-      <dd> Daniel Jackson </dd> +  <!-- pseudo-element <di> --> 
-    <!-- end --> +    <dt> Editors </dt> 
-  </dl>+    <dd> Robert Rothman </dd> 
 +    <dd> Daniel Jackson </dd> 
 +  <!-- end </di> --> 
 +</dl> 
 +</code>
  
 === 4. Sibling pseudo-elements === === 4. Sibling pseudo-elements ===
  
-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>+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>. 
 +<code css> 
 +h1::next {border: thick solid green;} 
 +</code> 
 +<code css> 
 +p::prev {border: thick solid green;} 
 +</code> 
 +<code html> 
 +<h1>heading</h1> 
 +<!-- pseudo-element --> 
 +<p>paragraph</p> 
 +</code>
  
-  <h1>heading</h1> 
-  <!-- pseudo-element --> 
-  <p>paragraph</p> 
-   
 === 5. Proliferation === === 5. Proliferation ===
  
-Mechanisms for adding more than one pseudo-element in some or all of the existing pseudo-element schemes+Mechanisms for adding more than one pseudo-element in some or all of the existing pseudo-element schemes.  CSS3 Content previously had the ability to specify multiples of a pseudo by specifying an index in square brackets. 
 +<code css> 
 +div::before[1] {border: thick solid green;} 
 +div::before[2] {border: thick solid lime;} 
 +</code> 
 +<code html> 
 +<div> 
 +  <!-- ::before pseudo-element 1 --> 
 +  <!-- ::before pseudo-element 2 --> 
 +  markup content 
 +</div> 
 +</code>  
  
-  <div> +<code css> 
-    <!-- ::before pseudo-element 1 --> +div::before {border: thick solid green; content="text1";} 
-    <!-- ::before pseudo-element 2 --> +div::before::before {border: thick solid lime; content="text2";} 
-    markup content +div::after {border: thick solid green; content="text3";} 
-  </div> +div::after::after {border: thick solid lime; content="text4";} 
-   +</code> 
-  <!-- nesting ::outside pseudo-element --> +<code html> 
-    <!-- nesting ::outside pseudo-element --> +<div> 
-      <div>markup content</div>+  <!-- ::before pseudo-element --> 
 +    <!-- nesting ::before pseudo-element --> 
 +      text2 
 +    <!-- end --> 
 +    text1 
 +  <!-- end --> 
 +  markup content 
 +  <!-- ::after pseudo-element --> 
 +    text3 
 +    <!-- nesting ::after pseudo-element --> 
 +      text4
     <!-- end -->     <!-- end -->
   <!-- end -->   <!-- end -->
-   +</div> 
-  <h1>heading</h1> +</code>   
-  <!-- multiple sibling pseudo-elements --> + 
-  <!-- multiple sibling pseudo-elements --> +<code css> 
-  <!-- multiple sibling pseudo-elements --> +div::outside[1] {border: thick solid green;} 
-  <p>paragraph</p>   +div::outside[2] {border: thick solid lime;} 
-  +</code> 
 +<code html> 
 +<!-- nesting ::outside pseudo-element --> 
 +  <!-- nesting ::outside pseudo-element --> 
 +    <div>markup content</div> 
 +  <!-- end --> 
 +<!-- end --> 
 +</code> 
 + 
 +<code css> 
 +h1::next[1] {border: thick solid green;} 
 +h1::next[2] {border: thick solid lime;} 
 +h1::next[3] {border: thick solid olive;} 
 +</code> 
 +<code html> 
 +<h1>heading</h1> 
 +<!-- multiple sibling pseudo-elements --> 
 +<!-- multiple sibling pseudo-elements --> 
 +<!-- multiple sibling pseudo-elements --> 
 +<p>paragraph</p>   
 +</code> 
 === 6. Complex wrapping of ranges of similar elements === === 6. Complex wrapping of ranges of similar elements ===
  
-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. +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. 
- +<code css> 
-  <div class=foo></div> +::wrap(div.bar) {border: thick solid green;} 
-  <!-- pseudo-element that wraps class bar --> +</code> 
-    <div class=bar></div> +<code html> 
-    <div class=bar></div> +<div class=foo></div> 
-  <!-- end --> +<!-- pseudo-element that wraps class bar --> 
-  <div class=foo></div> +  <div class=bar></div> 
-  <!-- pseudo-element that wraps class bar --> +  <div class=bar></div> 
-    <div class=bar></div> +<!-- end --> 
-  <!-- end --> +<div class=foo></div> 
-      +<!-- pseudo-element that wraps class bar --> 
 +  <div class=bar></div> 
 +<!-- end --> 
 +</code>
  
 +This could potentially also be addressed with #3.
 +<code css>
 +::wrap(div.bar, :not(div.bar)) {border: thick solid green;}
 +</code>
 
ideas/pseudo-elements.1326385266.txt.gz · Last modified: 2014/12/09 15:48 (external edit)
Recent changes RSS feed Valid XHTML 1.0 Valid CSS Driven by DokuWiki