Selectors Level 4

Ideas considered in Editor’s Draft (ED)

Ideas to consider

  • CSS4-UI more selectors (a potentially growing set of User Interface related selectors).
  • pseudo-attribute selectors, e.g. to select cells that are in the second column of a table: [#column=2] – this example done with :nth-column(2)
  • numeric attribute selectors, e.g. [height>2], [count<=5], [balance<0], [#row>1]
  • ::quote-start and ::quote-end, to match characters with the Quotation_Mark property that are direct children of the element and that are immediately inside the start and end (respectively) of the element, ignoring White_Space characters. (This would help a lot with <q> in HTML5.)
  • :placeholder - matches form elements displaying placeholder text. This allows web developers and theme designers to customize the appearance of placeholder text, which is a light grey color by default. This may not work well if you've changed the background color of your form fields to be a similar color, for example, so you can use this pseudo-class to change the placeholder text color.
  • ::window pseudo-element
  • limited descendant combinator (more info) – foo>bar, foo>:not(bar)>bar, … comes hardly close
  • Better definition of ::first-letter, see also note in Selectors L3
  • ::first-words(n), ::first-lines(n), ::nth-line(an+b), ::last-line etc.
  • semantic pseudo-class selectors e.g. for headings or “visible” elements (i.e. not <script> or <style>) akin to :link etc.
  • Clarify that first formatted line is not triggered when preceded by a block
  • UA hint pseudo-element selectors ::typo, ::match etc.

Ideas superseded by other features

  • relationship selectors, e.g.:
    • to select cells in a column: // td – done with td:column(
    • to select labels applying to an input control: input // label – done without further knowledge of markup language, i.e. $label /for/ input, $label input
    • to select map elements associated with an image: img // map – opposite of inputlabel situation, img /usemap/ map
    • to select arbitrary associated elements: x[href#] // y[id#] – always any ID in target, x /href/ y
  • only-child-parent Most use cases for the parent selector care only about the only child. This doesn't have the same perf implications as a general parent selector. – solved with :matches() and $
  • dynamic values selector - already handled by ::value pseudo-element in CSS3-UI.
spec/selectors4.txt · Last modified: 2012/03/30 15:06 by Tantek
Recent changes RSS feed Valid XHTML 1.0 Valid CSS Driven by DokuWiki