Extract attribute value using css selectors

Question

From the below HTML I am looking to extract the link in 'data-url' by using CSS selectors only(No methods).

<a class="btn" data-url="https://example.com">

BTW, I am trying to scrape a website using a _ scraper tool called webscraper .io, where the data to be extracted has to be specified using a CSS selector. Hence, I cannot make use of any useful methods from other programming languages.

Answer 1

The only thing I can think of is this:

.btn::after {
  content: ' ' attr(data-url);
}

Working Example:

 .btn::after { content: ' ' attr(data-url); }

 <a class="btn" data-url="https://example.com">URL:</a>

Answer 2

You can extract the url from the tag by using Element Attribute & then specifying the attribute name data-url in the attribute name field.

You can refer to the following sitemap for your reference.

{"_id":"stack-sample","startUrl":["http://elitesolution.co.in/sample/inde.html"],"selectors":[{"id":"a parent","type":"SelectorElementAttribute","parentSelectors":["_root"],"selector":"a","multiple":false,"extractAttribute":"data-url","delay":0}]}