selector

Copy for LLM

View as Markdown

Type:

Values:

CSS selector

It defines the

HTML element

you want to pick from the HTML markup over the url:

const mql = require('@microlink/mql')

const github = username => 
  mql(`https://github.com/${username}`, {
    data: {
      avatar: {
        selector: 'meta[property="og:image"]:not([content=""])',
        attr: 'content',
        type: 'image'
      }
    }
  })

const username = 'kikobeats'
const { response, data } = await github(username)

console.log(`GitHub avatar for @${username}: ${data.avatar.url} (${data.avatar.size_pretty})`)

It's equivalent to

Document.querySelector()

and any

CSS selector

can be specified, such as:

An HTML tag (e.g., 'img').
A CSS class or pseudo class, id or data-attribute (e.g., '#avatar').
A combination of both (e.g., 'img:first').

When selector is omitted, the attr operates on the entire page. This is useful for whole-page serialization (including formats like 'markdown'):

const mql = require('@microlink/mql')

const { data } = await mql('https://example.com', {
  data: {
    content: {
      attr: 'markdown'
    }
  }
})

console.log(data.content)
// => '# Example Domain\n\nThis domain is for use in…'

Omitting selector with attr is useful for LLM pipelines, content indexing, or feeding page content into downstream processing. Unsupported attr values fall back to HTML.

Fallback selectors

If you pass a collection of selectors, they are considered as fallback values:

const mql = require('@microlink/mql')

const github = username =>
  mql(`https://github.com/${username}`, {
    data: {
      avatar: [
        {
          selector: 'meta[name="twitter:image:src"]:not([content=""])',
          attr: 'content',
          type: 'image'
        },
        {
          selector: 'meta[property="og:image"]:not([content=""])',
          attr: 'content',
          type: 'image'
        }
      ]
    }
  })

const username = 'kikobeats'
const { response, data } = await github(username)

console.log(`GitHub avatar for @${username}: ${data.avatar.url} (${data.avatar.size_pretty})`)

Using multiple selectors makes the data rule more generic.

The position into the collection matters: The first data rule that returns a truthy value after applying type will be used, discarding the rest of the selectors.