This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| ideas:pseudo-elements [2012/02/15 08:37] – astearns | ideas:pseudo-elements [2017/01/27 12:16] (current) – bkemper | ||
|---|---|---|---|
| Line 3: | Line 3: | ||
| 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 ::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:// | ||
| - | Another | + | 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: |
| + | |||
| + | 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' | ||
| 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 93: | Line 95: | ||
| <!-- ::before pseudo-element 2 --> | <!-- ::before pseudo-element 2 --> | ||
| markup content | markup content | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | <code css> | ||
| + | div::before {border: thick solid green; content=" | ||
| + | div:: | ||
| + | div::after {border: thick solid green; content=" | ||
| + | div:: | ||
| + | </ | ||
| + | <code html> | ||
| + | <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 --> | ||
| </ | </ | ||
| </ | </ | ||