> For the complete documentation index, see [llms.txt](https://qatesting.gitbook.io/qa/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://qatesting.gitbook.io/qa/automation-testing/flow/selenium/selenium-webdriver/webdriver-commands/webelement/locators/css-selector.md).

# CSS Selector

CSS Selectors locate elements based on their attributes like id, class, tag type etc.

1. **Class Name** \
   Example: `<button class="signInBtn">Sign In</button>` \
   Selector: `Button.signInBtn` \
   Explanation: Targets a button element with the class name "signInBtn".
2. **ID** \
   Example: `<input id="inputUsername" type="text" placeholder="Username">` \
   Selector: `input#inputUsername` \
   Explanation: Selects an input element with the ID "inputUsername".
3. **Tagname\[attribute='value']** \
   Example: `<input type="text" placeholder="Username" value="">` \
   Selector: `input[placeholder='Username']` \
   Explanation: Selects an input element with the placeholder attribute set to "Username".
4. **Child items** \
   Example: `<header><div><button>Submit</button></div></header>` \
   Selector: `header div button` \
   Explanation: Select a button element that is a descendant of a div element, which, in turn, is a descendant of a header element.
5. **Attribute Contains** \
   Example: `<input type="password" placeholder="Enter Password">` \
   Selector: `input[type*='pass']` \
   Explanation: Selects an input element with an attribute type that contains the substring "pass".