> For the complete documentation index, see [llms.txt](https://docs.dogq.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dogq.io/documentation/selectors/css-selectors-101.md). # CSS Selectors 101 CSS barely needs an introduction. In web development it's used for selecting and styling HTML elements. In this guide we will only be discussing the usage of CSS selectors in the testing realm.

CSS Syntax Cheat Sheet

**Basic selectors** * **element** - selects all elements with the given tag name * **.class** - selects all elements by class name * **#id** - selects all elements with the given id * **\[attribute="value"]** - selects all elements with the given attribute-value pair **Compound selectors** * \[attribute1="value**"**]\[attribute2="value"] * .class1.class2.class3 * .class#id * element#id\[attribute=value] **Combinators** * **A B** - selects descendant **B** of parent **A** at any level, i.e. child, grandchild, etc. * **A > B** - selects descendant **B** of parent **A** at child level, i.e. not further * **A + B** - selects element **B** that immediately follows its sibling **A** * **A \~ B** - selects element **B** that follows its sibling **A** (not necessarily immediately) **Operators** * \[attribute**=**value] - exact matching * \[attribute**\*=**value] - partial matching (substring) * \[attribute**^=**value] - matching substring at the start of the value * \[attribute**$=**value] - matching substring at the end of the value

### CSS Selectors in testing Every element that you interact with in an automated test (whether it’s clicking, typing, asserting, etc.) needs to be uniquely identified so that it can be located during the test run. CSS selectors allow automated testing frameworks to do just that. In addition to targeting an element, they can also be used as assertions to verify an element's state or behavior.

This step asserts that an element with ID '*confirmBtnDisabled*' exists on the page.

*** ### Basic selectors As versatile and robust as they are, CSS selectors are at the same time really easy to learn and read. The four most common selector types in practice are ***type***, .***class***, **#*****id***, and ***\[attribute]*** selectors.

Selector	Result
input	selects all <input> elements
.typography5	selects all elements that have typography5 class
#submit-btn	selects all elements that have id with the value of 'submit-btn'
[type="password"]	selects all elements that have type attribute with the value of 'password'

*Type* selector can be replaced with a universal **\*** one that matches every element type on the page. It's a wildcard that is too broad and greedy on its own but can be useful when combined with other selectors in certain edge-cases. For example when you don't care about the element type or don't know anything about the element but its position.

This selector will match the first descendant of the element with *main-content* class regardless of what this element may be.

*** ### Compound selectors It's not uncommon that elements don't have any unique identifiers or attributes, which makes targeting them harder. This is when we need to explore **compound** and **complex** selectors. A **compound selector** combines multiple predicates of a single element, which makes for a more precise and refined selection.

Selector	Result
input[type="password"]	selects all <input> elements that have type attribute with the value of 'password'
button#confirm	selects all <button> elements that have id with the value of 'confirm'
.prim-color#submit	selects all elements that have prim-color class and id with the value of 'submit'
.secondary[data-testid="affiliateLink"]	selects all elements that have secondary class and data-testid attribute with the value of 'affiliateLink'

However, narrowing selectors can also lead to tests becoming more brittle towards DOM changes. So it is recommended to prioritize stable and predictable attributes like `data-testid` over dynamic, auto-generated or position-based ones.

Ideally, every element in your tests should have its own unique *data-testid* attribute.

*** ### Complex selectors While compound selectors use multiple attributes for enhanced precision, complex selectors include **combinators** and are based on the relationships between elements or DOM hierarchy. Such selectors can also be called positional and are generally not recommended as they can be susceptible to breakage when DOM changes get introduced. However there are cases where we still need them. It may have to do with the lack of unique attributes of the targeted element or the layout itself may be the object of verification.

This will match an element that is a child of an element with *nav-item* class and has *href* attribute with the value of '/*pricing/'*.

The four main types of **combinators** are: * descendant combinator `A B` - selects descendant **B** (children, grandchildren, etc.) of parent **A** * child combinator `A > B` - selects direct descendant **B** (children, NOT grandchildren and further) of parent **A** * next-sibling combinator `A + B` - selects element **B** that immediately follows its sibling **A** * sibling combinator `A ~ B` - selects element **B** that follows its sibling **A** (not necessarily immediately) Some typical examples: | Selector | Result | | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | li a | selects all <*a>* elements that are descendants of the <*li>* element | | footer > #footer-controls | selects all **direct** descendants (children) of the *\