CSS Selectors

What is a CSS selector?
A CSS selector is some text that lets a program know exactly where a piece of data is on a web page. For example, here's what a CSS selector might look like '#random .something'. The text between the '' is the CSS selector. Every element of every web page has a CSS selector.

Flutter uses these selectors to extract the text from a web page and insert it into a tweet.

How can I get a CSS selector?
The simplest way to extract a CSS selector from a chosen page is to use our bookmarklet Flutter Selector. Install Flutter Selector by dragging and dropping the button on this page into your bookmarks bar.

To demonstrate how to use Flutter Selector to get a CSS selector, I am going to walkthrough the process for getting the CSS selector of top Product Hunt.

To follow along you can either watch the video below or follow the instructions below the video.

  1. Install Flutter Selector by dragging and dropping the install button into your bookmarks bar. Drag and drop flutter selector button
  2. Browse to the page you want the CSS selector from. For this example we want the top Product Hunt so we would browse to https://producthunt.com. Once there click on the Flutter Selector bookmarklet. Start Flutter Selector on PH
  3. With Flutter Selector started we can now hover over elements and they should be surrounded with an orange border. Hover over the top Product Hunt of the day and click. Click the top PH
  4. On clicking the element, you will be presented with a prompt. In this prompt, the CSS selector for the element you just clicked will already be highlighted. All you need to do is CTRL + C (Windows) or CMD + C (Mac). Or alternatively right click the text and select 'copy'. Copy selector

Congratulations! You just extracted your first unique CSS selector using Flutter Selector. Extracting unique selectors from other pages can be more complex. If you ever find yourself struggling to extract the right CSS selector please get in touch and we'll do our best to help.