Skip to content

Commit

Permalink
add example link
Browse files Browse the repository at this point in the history
  • Loading branch information
AlexVipond committed May 24, 2021
1 parent a1ed9a8 commit ff514a9
Showing 1 changed file with 2 additions and 1 deletion.
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,15 @@ To use the CSS selector builder interface, go to [the website](https://css-selec

As you build your selector, the URL updates with any new conditions you've created. Click the share button to create a tweet intent with a custom short link for your selector.

[Example link](https://css-selector-builder.netlify.app/?conditions=[[{"id"%3A"d7j4UMsM"%2C"pipe"%3A"has+a+class%2C+which+I'll+specify"%2C"args"%3A["this"]}%2C{"id"%3A"6xIfbS_i"%2C"pipe"%3A"matches+any+of+one+or+more+selectors%2C+which+I'll+specify%2C+and+retains+the+specificity+of+the+most+specific+matching+selector"%2C"args"%3A[[{"id"%3A"HmAfTmVh"%2C"pipe"%3A"has+an+attribute+whose+value+meets+certain+conditions"%2C"args"%3A["super"%2C"^%3D"%2C"cool"%2Cnull]}]%2C[{"id"%3A"pGcH5x9k"%2C"pipe"%3A"has+an+ID%2C+which+I'll+specify"%2C"args"%3A["and"]}]]}]%2C[{"id"%3A"z_vlIhxT"%2C"pipe"%3A"is+the+first+child+of+its+type+inside+a+parent"%2C"args"%3A[]}%2C{"id"%3A"6CuaUTWJ"%2C"pipe"%3A"is+the+adjacent+sibling+of+an+element%2C+which+I'll+specify"%2C"args"%3A[[{"id"%3A"9mvLCYee"%2C"pipe"%3A"has+valid+contents"%2C"args"%3A[]}]]}]])

To play with the selector builder's recursive abilities:
1. Add a new condition
2. Open the dropdown, and type `matches`
3. Pick one of the options that starts with "matches" to render a nested selector builder. Fun stuff!

The relevant source code for the user interface is in [in the `src/interface` directory](https://github.com/AlexVipond/css-selector-builder/tree/main/src/interface).

?conditions=%5B%5B%7B%22id%22%3A%22d7j4UMsM%22%2C%22pipe%22%3A%22has+a+class%2C+which+I%27ll+specify%22%2C%22args%22%3A%5B%22this%22%5D%7D%2C%7B%22id%22%3A%226xIfbS_i%22%2C%22pipe%22%3A%22matches+any+of+one+or+more+selectors%2C+which+I%27ll+specify%2C+and+retains+the+specificity+of+the+most+specific+matching+selector%22%2C%22args%22%3A%5B%5B%7B%22id%22%3A%22HmAfTmVh%22%2C%22pipe%22%3A%22has+an+attribute+whose+value+meets+certain+conditions%22%2C%22args%22%3A%5B%22super%22%2C%22%5E%3D%22%2C%22cool%22%2Cnull%5D%7D%5D%2C%5B%7B%22id%22%3A%22pGcH5x9k%22%2C%22pipe%22%3A%22has+an+ID%2C+which+I%27ll+specify%22%2C%22args%22%3A%5B%22and%22%5D%7D%5D%5D%7D%5D%2C%5B%7B%22id%22%3A%22z_vlIhxT%22%2C%22pipe%22%3A%22is+user-editable%22%2C%22args%22%3A%5B%5D%7D%2C%7B%22id%22%3A%226CuaUTWJ%22%2C%22pipe%22%3A%22is+the+adjacent+sibling+of+an+element%2C+which+I%27ll+specify%22%2C%22args%22%3A%5B%5B%7B%22id%22%3A%229mvLCYee%22%2C%22pipe%22%3A%22has+valid+contents%22%2C%22args%22%3A%5B%5D%7D%5D%5D%7D%5D%5D


### Library
Expand Down

0 comments on commit ff514a9

Please sign in to comment.