Skip to main content

CSS Selectors & Siteimprove Policy

Sean Needham avatar


Siteimprove Policy can help users to find pages on that contain specific HTML elements, or elements that are required to be structured a certain way. This can be done using regular expressions set up by our dedicated Siteimprove team, or in some cases with CSS selectors. 

Based on user-cases put forward to us by Policy customers, we introduced the "CSS Selector" rule in the Policy module.CSS_Selector_rule_screenshot

If the content you wish to highlight can be expressed as a CSS selector, the information below will be of use to you.

About CSS selectors

CSS selectors are expressions that are matched against each page on the website. If the CSS selector matches one or more elements, the page will be considered a violation of the policy.

If you're not familiar with basic CSS selectors there are plenty of online guides that explain the concepts:

We support CSS2, CSS3 and some jQuery selector extensions. The full set we support is described here: https://github.com/jamietre/CsQuery#features.

Since we're so closely aligned to the selectors supported by jQuery, an easy way of creating and testing CSS2 and CSS3 selectors is to try it in your browser's DevTools (as well as jQuery selectors, if your site uses jQuery).

Some examples of CSS selectors

Please be aware that the Policy module's "CSS Selector" rule looks at the page's HTML code, and not in external CSS files.

All pages containing <meta name="og:title"...>

meta[name="og:title"]

External links that don't open in a new window/tab

a[href^="http"]:not([href*="yourdomain.com"]):not([target="_blank"])

This matches links that begin with "http" or "https", and then filters out those that point to your own domain.

Instances of bold text (font-weight: bold)

[style*="bold"]

Links within the body of the page that lack a "title" attribute (ignoring 'mailto' links)

main a:not([title]):not([href^="mailto"])

NOTE: your site's page body might not be placed in a <main> element, so the first part of this selector might need to be tailored to your site.

Meta tags named 'og:title' whose "content" attribute contains the company name

meta[name="og:title"][content*="My Company"]

Be aware of the different attribute selectors available. Check the documentation links above for the details.

Image elements with an explicit width attribute

img[width]

This will verify that the "width" attribute exists in the HTML code, but does not look at its value.

Images without an explicit width

img:not([width])

Images with no explicit width, nor a width in the style attribute

img:not([width], [style*="width:"]) 

Hidden H1s 

h1:hidden

This is a jQuery extension that finds H1s that are explicitly hidden, or contained in an element that is explicitly hidden. 

Find all pages that have a form in the main content area

main form

NOTE: your site's page body might not be placed in a <main> element, so the first part of this selector might need to be tailored to your site.

Find all H1 headings containing a specific word

h1:contains("Garbage")

This is a jQuery extension that looks at an element's content. This selector is case-sensitive. You can work around this by using multiple selectors:

h1:contains("Garbage"), h1:contains("garbage")

Was this article helpful?

12 out of 16 found this helpful