When interested in things on the web, you may find yourself interested in content that’s not nestled as the text content inside an HTML node but, rather, the value of an “attribute”. In CSS you will find the @ symbol used for defining rules but never selectors hence it’s used in LSD as a mnemonic for getting these values.
FROM <url>
|> SELECT <css_selector>@<attribute> AS <your_label>
To get the value of an attribute of an element, append to the selector for the element an @ symbol followed by the identifier of the attribute you’re interested in.
Let’s take the following query which provides the front page of Lobsters.
post_container <| div.details |
post <| a |
domain <| a.domain |
author <| a.u-author.h-card |
FROM https://lobste.rs/
|> GROUP BY post_container
|> SELECT post, domain, author
However, if you wanted to not only grab the post title provided by the author but also the link itself, then you’d be interested in grabbing the href attribute of the anchor tag for post. This could then be simply rewritten to post@href.
post_container <| div.details |
post <| a |
domain <| a.domain |
author <| a.u-author.h-card |
FROM https://lobste.rs/
|> GROUP BY post_container
|> SELECT post, post@href, domain, author
For readability reasons, the above could be written as the below with the attribute selector applied to the CSS selector a itself instead of the variable post.
post_container <| div.details |
post <| a |
post_link <| a@href |
domain <| a.domain |
author <| a.u-author.h-card |
FROM https://lobste.rs/
|> GROUP BY post_container
|> SELECT post, post_link, domain, author