Search code examples
javascripthtmljquerycheerio

Cheerio: select pseudo-element

I have the following HTML:

<div class="media-body">

  <div class="avatar-photo pseudo-a" tabindex="0" data-href="https://" style="background-image: url(https://6fqap94ibfgqil3r47o1.jpeg);"></div>
  <div class="media-user-reviews">
    <div class="rating-stars rating-4"><i class="fas"></i><i class="fas"></i><i class="fas"></i><i class="fas"></i><i class="far"></i></div>                        <span class="rating-mini-count">76</span>
  </div>
</div>

And div .media-user-name has a pseudo-element, like this:

media-user-name

The case is, that years ago I was using Xray library to parse the elements, and I take this element down, with `status: '@data-online'. But as for now, I'd like to replace it, with Cheerio. and when I am trying to:

    const page = cheerio.load(response.data);
    const test = page.html('body');
    // I tried even 'div.avatar-photo.pseudo-a::active'
    const status = page(node).find('div.avatar-photo.pseudo-a');

Also, I have tried to use .css('background') or anything else to react to the element (actually I don't need the background itself, but it's also an option.

So, my question is, how to reach div.avatar-photo.pseudo-a::active (the element on screenshot)?

Because cheero gives me an error, that is doesn't support it.

Solution

  • You can access attributes on DOM elements using the querySelector like this:

    All password inputs: input[type="password"]

    All div containing data-name tag (just an example, can be anything): div[data-name]

    Read more about it here:

    querySelector

    a complex example [MDN]