1. 5

A list of new ideas for CSS selectors, at-rules, units, values, properties, and functions

  1.  

  2. 5

    The full-page link, for mobile: https://codepen.io/tomhodgins/full/oeKOOO/. This should be the actual link – the markup powering this article is irrelevant.

    1. 3
    2. 3

      I believe what you’re looking for is called XPath. CSS was designed for styling documents; XPath was designed for traversing XML trees. Now, if only XPath selectors could be used from inside CSS…

      1. 2

        Oh I have got you covered! I use XPath in CSS to select elements and have made two plugins for doing this, depending on whether you’d rather do it from CSS or from JS:

        [xpath="//*"] {
          background: lime;
        }
        
        <style process=auto>
          ${xpath('//*', `
            background: lime;
          `)}
        </style>
        

        (to be honest, I have ~20 plugins that I use to do everything in the wishlist :D)

        1. 2

          Oh wow, you came to this thread prepared ?

          CSSplus is a family of CSS reprocessing plugins that give you more power when writing CSS. It’s called “CSSplus” because it’s CSS plus JavaScript, the method most of these plugins use to add power to CSS is by having JavaScript dynamically update CSS variables with information about the browser and elements.

          Okay, so from what I understand, you’re looking for this stuff to be built into CSS instead of a dynamic plugin. Is that right?

          1. 2

            Yeah, my ‘CSS Wishlist’ are the ideas I work with all the time via CSS + JS, but what they might look like if they were specced as part of CSS.

            I’ve got a CSS reprocessor feature comparison chart that tracks which of 20 plugins does which responsive technique. I’m writing up all of these techniques, and I made this little wishlist as an aside taking a break from writing because I had never put all of the ‘ideas’ together in a fake CSS-like syntax in the same document before :D

            If any of these ideas piqued your interest - they’re all already usable today, just not via the fake CSS syntax in my wishlist!

      2. 2

        First off, beautiful site. Love how the gradient continues through the items!

        Some quick comments about the wishes, which all seem pretty sensible:

        • the :attribute(partial-name-*) request is pretty completely covered both by [attr*=value] that matches attributes containing value and other related selectors like [attr|=value] (see MDN docs) EDIT: I cede this point to innovati!
        • :parent is covered by :has, but has not been implemented in any browsers…probably because of the potentially enormous performance hits.
        1. 3

          You can match attribute values as strings, but not attribute names themselves. Suppose you have <div data-example1> and <div data-example2>, how can you write a selector that will select both data attributes data-example1 and data-example2, without listing out all possibilities like [data-example1], [data-example2], etc…

          Consider these examples:

          But this isn’t something CSS is capable of doing presently.

          Also, I think the difference between selecting an element’s direct parent (like parentNode in JavaScript) is a lot simpler than finding the nearest ancestor matching a selector to another element (like closest() in JavaScript), or like selecting all parents of an element that match a CSS selector (like :has() if it existed)

          1. 2

            Love how the gradient continues through the items!

            While cool, that effect doesn’t seem to work if I block javascript from cdnjs.cloudflare.com so I’m assuming it’s not pure CSS.

            1. 2

              Indeed not - it’s using EQCSS via JS to style elements using the knowledge of their index within the total number of tags like it in the document:

              @element code {
                $this {
                  background: hsl(eval("([].indexOf.call(document.querySelectorAll('code'), $it) * 5) + 150"), 100%, 90%);
                }
              }
              

              This means that each <code> tag gets an HSL() value for its background that uses [].indexOf.call(document.querySelectorAll('code'), $it) * 5) in JavaScript to get the current index of that <code> tag :D

          2. -3

            your wishlist has a name, jQuery

            1. 8

              Neither constructive nor accurate.

              The proposed cursorX or cursorY value, for example, would immensely simplify implementing a magnifying glass or Pikachu chasing the mouse cursor or whatever.

              The :parent selector, while annoying in implementation for browser devs, would help a lot with certain clever effects (easiest being, say, drag-and-drop) when used properly.

              round, floor, and clamp speak for themselves.

              “lol use jQuery” would imply adding a nontrivial amount of javascript and dependencies for use cases that are really obviously common at this point.