Skip to main content

CSS Selectors & Siteimprove Policy

Kate Sygrove avatar
By Kate Sygrove

 

Sometimes you want to find pages on your site that contain specific HTML elements, or elements that are required to be structured a certain way.

This can in some instances be done using regular expressions set up by our dedicated Siteimprove team, but many cases they can be extremely hard to address.

Therefore, based on user-cases put forward to us by Policy customers, we are introducing a new rule within the Content category  - CSS Selector. 

CSS Selector rule in Siteimprove Policy

If your requirements, or those of your customers, can be expressed as a CSS selector this is for 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:

The 30 CSS Selectors you Must Memorize
CSS Getting Started
CSS Selector Reference

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 what can be done

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 the body of the page that don't 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 of course 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?
6 out of 8 found this helpful