> For the complete documentation index, see [llms.txt](https://hov-qa.gitbook.io/hov-qa-engineers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hov-qa.gitbook.io/hov-qa-engineers/agile-testing/css-elements-for-qa.md).
# CSS elements for QA
### What is CSS?
* [CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS) stands for *Cascading Style Sheets*. It is a language used for styling HTML documents, i.e. it describes the layout of the HTML document, how elements should look, and so on.
* it is a styling language that is used in modifying the content of web pages.
### What are CSS selectors?
A CSS selector is an identifier of one or many elements on a web page.
### What is CSS used for?
Their primary purpose is to enable visual styling of the site, but they can be used to automate front-end testing as well.
In other words, it’s a way to locate one or more elements on the page.
### CSS Syntax
* CSS style starts with a **selector** enclosed by curly brackets {} used to denote the start and end of styles applied to the selector
* Lastly, inside the curly brackets are 1 or more property value pairs. Each of these pairs defines a property such as color, font size, etc., and the value for that property
sample of CSS syntax
### Types of Selectors
| Type of Selector | Decription | Sample |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| Element |
Whether or not an HTML element has attributes that make it distinct, you can always target the element type itself.
It's super easy to target elements because you don't need to precede it with any special characters. You need only write the element type that you want to target.
The same goes for h-tags, like h1, h2, h3, etc., divs, spans, and all other element names.
| p, h1, div, header, footer, span, strong, a, btn |
| Class |
Class is one of the most common attributes you will find on HTML elements. Like ID, it is a special kind of attribute that results in a unique format for the CSS selector that targets it.
To select a class, you need only put a period before the variable value. For example, an element with attribute class="pull-quote" can be targeted with:
|
.pull-quote
|
| ID |
Even if a site does not have testIDs for every element, it may have regular IDs. They will appear in the same format as any other attribute in the HTML, but they belong to their own type.
Their unique type means that the format of the selector is simply a hash followed by the variable value. For example, an element with an ID in the HTML that looks like this: id="abc123" can be targeted with a selector written like this:
|
#abc123
|
| Attribute |
HTML elements will often have attributes tied to them such as title, height, and style. These attributes will typically be followed by an equal sign and a hyphen separated variable in double quotes, like this:
ATTRIBUTE="VARIABLE-NAME"
The ideal selector for QA testers is the "testid" attribute. When unique testIDs are assigned to every element on a site, QA can confidently automate tests by precisely targeting specific elements throughout the application without relying on attributes that may apply to more than one element.
Targeting an attribute with a selector will usually require putting it in brackets and sometimes either removing the double quotes or changing them to single quotes. For example:
| `[data-testid=sample-login-button-variable]` |
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://hov-qa.gitbook.io/hov-qa-engineers/agile-testing/css-elements-for-qa.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.