CSS Selectors & Siteimprove Policy
Siteimprove Policy can help users to find pages 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 Siteimprove's Support 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.
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 on a page, the Policy will list that page.
If you're not familiar with basic CSS selectors, there are plenty of online guides that explain the concepts:
As well as standard CSS selectors have a look at this article on Non-standard CSS selectors that can be used in Policy.
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 are so closely aligned to the selectors supported by jQuery, an easy way of creating and testing CSS selectors is to try them directly in your browser's Developer Tools (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.
Pages containing the meta tag "og:title"
meta[name="og:title"]
External links that don't open in a new window or tab
a[href^="http"]:not([href*="yourdomain.com"]):not([target="_blank"])
This matches links that begin with "http" or "https", and then excludes 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.
Image elements without an explicit width attribute
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 <h1>s 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 that contain a specific word
h1:contains("Company")This is a jQuery extension that looks at an element's content. This selector is case-sensitive by default. You can make it case insensitive by adding -i:
h1:contains-i("Company")
Did you find it helpful? Yes No
Send feedback