Get the Selector for Using with Stylish Extension (userstyles.org) to Customise Websites

Many websites may not look suitable with personal style, the Chrome extension called Stylish can help browser users customise any CSS.

Get the CSS selector directly for an HTML element:

1) Right-click on the UI element on web page, choose 'Inspect'

2) DevTools panel is opened, right-click on highlighted tag, choose 'Copy > Copy selector' 

3) Create or edit a Stylish style

4) Paste the selector and enter CSS properties

However, many websites/webapps use generated element ids and class names, the CSS selector above won't work when these websites are built (daily for example) and deployed. Use the XPath solution below.

Get the CSS selector by converting XPath to CSS selector:

1) Right-click on the UI element on web page, choose 'Inspect'

2a) DevTools panel is opened, right-click on highlighted tag, choose 'Copy > Copy full XPath' 

2b) Open website toolset.sh, there's a tool there to convert XPath to CSS selector

3) Create or edit a Stylish style

4) Paste the selector and enter CSS properties