This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
ideas:pseudo-elements [2012/01/11 17:06] – astearns | ideas: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:// | ||
- | The :: | + | One issue is that there is very little scripting access to pseudo-elements currently. If we end up relying on pseudo-elements |
- | === 1. Simple wrapping of a single | + | Another issue is how to provide a way to override pseudo-element styling. If one stylesheet defines |
- | ::outside was meant to create | + | Here is a list of possible |
- | <!-- pseudo-element | + | === 1. Simple wrapping of a single |
- | < | + | |
- | <!--end --> | + | |
- | === 2. Complex wrapping of an element | + | In CSS3 Content, '':: |
+ | <code css> | ||
+ | div:: | ||
+ | </ | ||
+ | <code html> | ||
+ | <!-- pseudo-element | ||
+ | < | ||
+ | <!--end --> | ||
+ | </ | ||
- | A wrapper that contains a range of elements specified by indices | + | === 2. Complex wrapping |
+ | 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> | ||
+ | # | ||
+ | </ | ||
+ | <code css> | ||
+ | # | ||
+ | </ | ||
+ | <code html> | ||
+ | <div id=parent> | ||
+ | < | ||
<!-- pseudo-element containing the next three elements --> | <!-- pseudo-element containing the next three elements --> | ||
- | < | ||
< | < | ||
< | < | ||
+ | < | ||
<!--end --> | <!--end --> | ||
- | <div>4</ | + | <div>5</ |
+ | </ | ||
+ | </ | ||
+ | |||
+ | 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. | ||
=== 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> | + | 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 < |
+ | <code css> | ||
+ | dl:: | ||
+ | </ | ||
+ | <code html> | ||
+ | < | ||
+ | <!-- pseudo-element <di> --> | ||
+ | <dt> Last modified time </ | ||
+ | <dd> 2004-12-23T23: | ||
+ | <!-- end </di> --> | ||
+ | <!-- pseudo-element <di> --> | ||
+ | <dt> Recommended update interval </ | ||
+ | <dd> 60s </ | ||
+ | <!-- end </di> --> | ||
+ | <!-- pseudo-element <di> --> | ||
+ | <dt> Editors </ | ||
+ | <dd> Robert Rothman </ | ||
+ | <dd> Daniel Jackson </ | ||
+ | <!-- end </di> --> | ||
+ | </ | ||
+ | </code> | ||
- | | + | === 4. Sibling pseudo-elements === |
- | <!-- pseudo-element --> | + | |
- | <dt> Last modified time </dt> | + | 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 |
- | <dd> 2004-12-23T23:33Z </dd> | + | <code css> |
+ | h1::next {border: thick solid green;} | ||
+ | </ | ||
+ | <code css> | ||
+ | p::prev {border: thick solid green;} | ||
+ | </ | ||
+ | <code html> | ||
+ | < | ||
+ | <!-- pseudo-element --> | ||
+ | <p>paragraph</p> | ||
+ | </code> | ||
+ | |||
+ | === 5. Proliferation === | ||
+ | |||
+ | Mechanisms for adding more than one pseudo-element in some or all of the existing pseudo-element schemes. | ||
+ | <code css> | ||
+ | div::before[1] {border: thick solid green;} | ||
+ | div:: | ||
+ | </code> | ||
+ | <code html> | ||
+ | < | ||
+ | <!-- ::before pseudo-element 1 --> | ||
+ | <!-- ::before pseudo-element 2 --> | ||
+ | markup content | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <code css> | ||
+ | div::before {border: thick solid green; content=" | ||
+ | div:: | ||
+ | div::after {border: thick solid green; content=" | ||
+ | div:: | ||
+ | </ | ||
+ | <code html> | ||
+ | < | ||
+ | <!-- ::before pseudo-element --> | ||
+ | <!-- nesting ::before pseudo-element --> | ||
+ | text2 | ||
<!-- end --> | <!-- end --> | ||
- | <!-- pseudo-element --> | + | |
- | <dt> Recommended update interval </dt> | + | |
- | | + | markup content |
+ | <!-- :: | ||
+ | | ||
+ | | ||
+ | | ||
<!-- end --> | <!-- end --> | ||
- | <!-- pseudo-element --> | + | |
- | <dt> Authors </ | + | </div> |
- | | + | </code> |
- | < | + | |
- | <dt> Editors | + | |
- | < | + | |
- | <dd> Daniel Jackson </ | + | |
- | <!-- end --> | + | |
- | </dl> | + | |
- | === 4. Sibling pseudo-elements === | + | <code css> |
+ | div:: | ||
+ | div:: | ||
+ | </ | ||
+ | <code html> | ||
+ | <!-- nesting ::outside pseudo-element --> | ||
+ | <!-- nesting ::outside pseudo-element --> | ||
+ | < | ||
+ | <!-- end --> | ||
+ | <!-- end --> | ||
+ | </ | ||
+ | |||
+ | <code css> | ||
+ | h1::next[1] {border: thick solid green;} | ||
+ | h1::next[2] {border: thick solid lime;} | ||
+ | h1::next[3] {border: thick solid olive;} | ||
+ | </ | ||
+ | <code html> | ||
+ | < | ||
+ | <!-- multiple sibling pseudo-elements --> | ||
+ | <!-- multiple sibling pseudo-elements --> | ||
+ | <!-- multiple sibling pseudo-elements --> | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | === 6. Complex wrapping of ranges of similar | ||
- | 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 | + | 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 '' |
+ | <code css> | ||
+ | :: | ||
+ | </ | ||
+ | <code html> | ||
+ | <div class=foo></ | ||
+ | < | ||
+ | | ||
+ | <div class=bar></ | ||
+ | <!-- end --> | ||
+ | <div class=foo></ | ||
+ | <!-- pseudo-element that wraps class bar --> | ||
+ | <div class=bar></ | ||
+ | <!-- end --> | ||
+ | </code> | ||
- | < | + | This could potentially also be addressed with #3. |
- | <!-- pseudo-element --> | + | <code css> |
- | < | + | :: |
+ | </code> |