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.

@QHarr: Some web scraping tools include special, non-standard selectors (in the CSS selector syntax) that will actually do the extracting for you. webscraper.io seems to have a completely different definition of a "selector" in addition to the traditional "CSS selector" though and it looks like the asker is going to need both, given the way this tool is designed. — BoltClock
– BoltClock, Commented Sep 2, 2019 at 3:56
@QHarr: But this question is exceptional - in the vast majority of web scraping questions, that distinction doesn't actually matter. Any time someone asks to "extract [...] using selectors/XPath" it's pretty much implied that they want to 1) match elements using selectors, and then 2) extract data from whatever gets matched. The distinction becomes important once someone says they can only pass in a selector/XPath string, and even then they're probably already aware of the distinction. — BoltClock
– BoltClock, Commented Sep 2, 2019 at 3:58
@BoltClock I sit corrected :-) Definitely worth knowing, thanks. — QHarr
– QHarr, Commented Sep 2, 2019 at 5:07

Machavity · Accepted Answer · 2020-04-02 14:43:12Z

1

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}]}

edited Apr 2, 2020 at 14:43

Machavity♦

31.8k27 gold badges97 silver badges108 bronze badges

answered Apr 2, 2020 at 14:08

user2615436

265 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rounin · Accepted Answer · 2019-09-09 21:07:37Z

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>

answered Sep 9, 2019 at 21:07

Rounin

29.9k13 gold badges102 silver badges126 bronze badges

Collectives™ on Stack Overflow

Extract attribute value using css selectors

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related