Skip to main content

CSS Selectors & Siteimprove Policy

Kate Sygrove avatar
By Kate Sygrove

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 Content category in Policy.  

CSS Selector rule in Siteimprove Policy

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 short 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 selectors is to try it in your browser in the context of the website (if you have jQuery on the site).

Examples of possible matches using CSS selectors

Find all pages with <meta name="og:title"...>

meta[name='og:title']

Example of how to use CSS Selector rule in Siteimprove Policy

Find all external links that don't open in a new window/tab

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

This will only match links going to HTTP or HTTPS and then filter those out pointing to your own domain.

 

Find any instance of Bold (font-weight: bold)

[style*="bold"]

(*) is being used to target all page elements. NOTE: This will not take rules defined in the stylesheets.

 

Find links within the body of the page that do not have a title attribute, where 'mailto' links are excluded

.mainbody a:not([title]):not([href^=mailto])

 

Find all meta tags named 'og:title' where content attribute contains the company name

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

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

 

Find all images with an explicit width

img[width]

This will verify that the attribute exists, but not that it has a value.

 

Find all images without an explicit width

img:not([width])

 

Find all images without an explicit width or a width in the style attribute

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

 

Find all hidden H1s 

h1:hidden

This is a jQuery extension. It'll find H1s that are explicitly hidden, or that are contained in an element that is explicitly hidden. This won't take stylesheet rules into account, it will only consider style attributes on the page.

 

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

#maincontent form

This will have to be tailored to the specific website. ID selectors are usually quite specific to a particular website.

 

Find all H1 headings containing a specific word

h1:contains('Garbage')

Be aware that this is case-sensitive. To work around this you'll have to use multiple selectors:

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

Was this article helpful?
7 out of 9 found this helpful