## Table of Contents

- [selector](#selector)
- [Fallback selectors](#fallback-selectors)

---

[](https://microlink.io/docs/api/getting-started/overview)

[API](https://microlink.io/docs/api/getting-started/overview)

[](https://microlink.io/docs/guides)

GUIDES

[](https://microlink.io/docs/mql/getting-started/overview)

MQL

[](https://microlink.io/docs/sdk/getting-started/overview)

SDK

[](https://microlink.io/docs/cards/getting-started/overview)

CARDS

## selector

Type:

\<string\> \| \<string\[\]\>

\
Values: [](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)

CSS selector

It defines the [](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)

[HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)

you want to pick from the HTML markup over the [url](https://microlink.io/docs/api/parameters/url):

``` js
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 [](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)

[Document.querySelector()](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)

and any [](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)

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](https://microlink.io/docs/mql/data/attr) operates on the entire page. This is useful for whole-page serialization (including formats like 'markdown'):

``` js
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:

``` jsx
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.