CSS Selectors & Siteimprove Policy

Modified on: Thu, 1 Jul, 2021 at 5:32 PM

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"]

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

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

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")

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.