Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS Selectors: A Visual Guide

fffuel.co

Post reply on HN
Print view View original

51–59 of 59 posts

Re: CSS Selectors: A Visual Guide

#52

Post by ttfkam »

hk1337 wrote: post #6

Very cool. It seems to be missing the begins with and ends with selectors for the attr-val. [title^=“old”] and [title$=“old”]

I'm constantly amused by how often regular expression syntax can be found in all sorts of unexpected places. It really is foundational knowledge these days.

    ^ means match input start
    $ means match input end
Makes remembering the CSS selector syntax easier once you know that. (Or makes the regex syntax easier to remember?)

Re: CSS Selectors: A Visual Guide

#55

Post by lazylion2 »

keepamovin wrote: post #38

10 years ago I created an algorithm to generalize CSS selectors based on applying the "sequence alignment" algorithm (from bioinformatics / string matching) to objects (bags of attribute / key values, ie, HTML elements). This let you select two or more examples and produce a selector that captures what you meant. More here: https://github.com/00000o1/selector-generalization There've been multiple attempts at such a t…

Updated link for the live example:

https://dosyago.github.io/selector-generalization/

Re: CSS Selectors: A Visual Guide

#56

Post by keepamovin »

lazylion2 wrote: post #55
keepamovin wrote: post #38

10 years ago I created an algorithm to generalize CSS selectors based on applying the "sequence alignment" algorithm (from bioinformatics / string matching) to objects (bags of attribute / key values, ie, HTML elements). This let you select two or more examples and produce a selector that captures what you meant. More here: https://github.com/00000o1/selector-generalization There've been multiple attempts at such a t…

Updated link for the live example: https://dosyago.github.io/selector-generalization/

THank you lazylion2! That's very kind of you!

Re: CSS Selectors: A Visual Guide

#57

Post by myfonj »

And maybe some folks could be interested about little known fact that each selector has even a namespace part on the left; the void implicit one having effect depending on presence or absence of `@namespace` prologue in given stylesheet: - In stylesheet without explicit unnamed namespace it is like '*|', so everything is like `*|`; - In stylesheet with explicit unnamed namespace (`@namespace "");`) all element selectors without `|` match only elements from that namespace. - In stylesheet with explicit named namespace (`@namespace "";`) all element selectors with `|` match only elements from that namespace.

    @namespace "bogus"; /* unnamed */
    @namespace aitchtee "http://www.w3.org/1999/xhtml";
    @namespace esvee "http://www.w3.org/2000/svg";
    * {  /* will not match anything, because "bogus" NS */ } 
    html {  /* also nothing, because "bogus" NS */ } 
    *|* { /* will match everything */ }
    aitchtee|title { /* will not match SVG title element, only the HTML one */ }
    aitchtee|*:root { /* will match html */ }
    esvee|* { /* all SVG elements */ }
Post reply on HN