When you’re interested in getting data from a repeating list or grid of containers from a web page, there may be fields or values you’re interested in getting when they exist but leaving as an empty string when they do not exist. For these scenarios we have the exclamation mark operation: !
When you query for elements using LSD, you will have the selectors you’re looking for as well as the repeating containers they may be found in. In scenarios where you query for something that does not appear in or as the repeating container, the selector will be attempted to be found in the parent document unless you append an exclamation mark to the end of the selector string (and before symbol decorators like attributes or properties like shown below).
<css selector> [optional !] [optional @<attribute>] [optional {<property}]
In the case of span!@data-src, it distills into the following:
css selector => span
! operator => !
attribute => data-src
Where it’ll only retrieve the data-src of the matched span element if and only if that span showed up in the respective container we’re iterating on.
Suppose we have the following HTML:
<!DOCTYPE html>
<html>
<head>
<title>This is the title of the page</title>
</head>
<body>
<div class="inconsistent-container">
<span>foo</span>
</div>
<div class="inconsistent-container">
</div>
</body>
</html>
And we wanted to grab the span for “foo” but have be an empty string in the second container, here’s what the code for that would look like.
container <| div.inconsistent-container |
item <| span! |
FROM https://example.lsd.so
|> GROUP BY container
|> SELECT item