CSS Selector

Link to CSS Selector copied to clipboard

On this page:

There are several areas of the axe Auditor application that provide a Selector field. Follow this process when you want to specify a particular CSS selector to be tested as part of the following:

  • Common Component (New Test Case > Add Component): When defining a common component on the Common Components panel when creating a new Test Case.
  • Page Area Component (New Test Case > Add Page > Page Area Scope): When defining a Page Area on the Add Pages panel when creating a new Test Case.
  • Page Area Component (Prepare Page for Automated and Manual Testing > Page Area Scope): When defining a Page Area of the "page under test" on the Prepare Page for Automated and Manual Testing screen accessed from Test Run Overview.

Getting Started

Locating and copying a selector typically involves using the "developer tools" that come with your web browser. These have different names depending on the browser type, and each offers keyboard shortcuts for accessing the tools and navigating within them.

Keyboard Shortcuts Reference by Browser Type

On a Mac: Generally, the Cmd key (⌘) can be substituted for [Ctrl] on an OSX or iOS device.

Opening Developer Tools (Firefox Example)

The example that follows depicts usage of Mozilla Firefox Developer Tools. For more information about using keyboard shortcuts with Firefox Developer Tools, see Mozilla Developer Keyboard Shortcuts new window .

You can open the Inspector (one of the Developer Tools that launches all of them) in either of the following ways:

  • Without an element selected: Choose the Inspector option from the Developer menu (Ctrl+Shift+I), or from the Firefox Menu Bar, select Tools > Web Developer > Inspector (Ctrl+Shift+C).
  • With an element selected: Right-click an element on a web page and select Inspect Element [(Q)]{.kbd}.

Copying a Selector from a page

  1. Right-click on the desired region of the testing page, then select

Inspect Element from the menu to launch the Inspector so that you can then select an element on the page (or use keyboard shortcut Ctrl+Shift+I).

![Right-clicking on the page under test, then selecting Inspect Element from menu](../../../images/right-click-inspect-element.png)

  1. Copy the CSS selector you want to target. For example, when using Firefox Developer Tools, you can right-click > Copy Unique Selector for the currently-selected element in the Inspector tool. Be sure to paste the properly-formatted full element reference (for example, to test the id attribute element for the value "main", you would specify #main as the selector).

    Right-clicking on the page under test, then selecting Copy Unique Selector in Firefox Developer Tools right-click menu

Information - Selector Formatting Reference with Example: For complete details about properly formatted CSS selectors and full element reference, see Mozilla Developer Web CSS Selector documentation{.external} or Selectors Level 3 W3C Recommendation.{.external}.

  • Selector: #id - The #id selector styles the element with the specified id.

  • Example: #main - The specified id is main.

  • Example Reference: Selects the element with id="main".

    Using devtools Inspect Element to identify CSS selector on testing page

  1. Paste the selector you copied from the virtual clipboard into the Selector field.

    When you access the resulting issues found for the component or page area targeted, you will see included those related to the specific CSS selector you entered.

  2. Known bug: When using CSS Selector in Chrome Browser. Right Inspect, Open Dev tools, on elements tab, find css selector to target click and element>copy>xpath or element>copy>Full xpath always return this error,\ ' An unknown error occurred. If this test case contains any components or page areas please make sure all selectors are valid'\ Workaround: Find the ID for the CSS Selector and Copy>Copy Selector

What are Selectors?

Quick Answer: They are strings of text that can be used to identify an element or group of elements on a webpage.

Slightly Longer, More Technical Answer: Selectors are patterns that match against elements in a tree structure, and can be used to test specific fragments or select nodes within HTML or XML documents. The Cascading Style Sheet (CSS3) language describes the rendering of HTML documents on screen or in speech, and uses selectors for binding style properties to elements in HTML documents.

Usage: By evaluating the expression across all the elements in a subtree, selectors can be used to:

  • Select a set of elements
  • Select a single element from a set of elements

Structure: A selector represents a structure that can be used as a condition (as in a CSS rule) that determines which elements a selector matches in a document tree, or as a flat description of the HTML or XML fragment corresponding to that structure.

Types: Selector types include:

  • Universal: The qualified name of any element type (*) For example, to specify the qualified name of any English language element in the document tree for any namespace, enter:

    *[hreflang|=en]

  • Type: An optional namespace component prefix prepended to an element name (|) For example, to represent a heading 2 element in the document tree, simply enter:

    h2

  • Attribute: Represents an element's attribute ([]) For example, to represent an h3 element that carries the title attribute, whatever its value, enter:

    h3[title]

  • Class: Period or "full stop" notation to represent the class attribute for the respective namespace (.) For example, to assign green color style information to all elements with class="example", enter:

    .example { color: green } / all elements with class=example */

  • ID: Attributes declared to be of type ID uniquely identifies an element with a number sign (#) For example, to represent an ID selector where any element whose ID-typed attribute value is "12345", enter:

    #12345

  • Pseudo-classes: Selection of information outside the document tree that can't be expressed with simple selectors (:) For example, to specify a selector that represents links carrying class external and already visited, enter:

    a.external:visited

  • Pseudo-elements: Two colons followed by the name of a pseudo-element allow for access to content beyond the current document tree, and only one per selector is allowed (::)

    For example, to change the letters of the first line of every p element to uppercase, enter:

    p::first-line { text-transform: uppercase }

  • Combinators: Allow for specification of a hierarchical path to show ancestry such as child or sibling elements ( ) or (+)

    For example, to target em elements that are descendants of h1 elements, enter:

    h1 em.

    It is a correct and valid, but partial, description of the following fragment:

    <h1>This <span class="myclass"> headline is <em>very>/em> important</span></h1>

Syntax: The basic "grammar" of selectors includes the following:

  • *: 0 or more (Note: Since this can be omitted when implied, it is not used often.)
  • +: 1 or more
  • ?: 0 or 1
  • |: separates alternatives
  • [ ]: grouping

Comprehensive Reference: For more information, refer to World Wide Web Consortium (W3C) - Selectors Level 3: https://drafts.csswg.org/selectors-3/ new window

Is this page helpful?

Help us improve this page

Still need help?