CSS attribute and pseudo-class selectors in Selenium Java

Introduction

CSS attribute and pseudo-class selectors help find web elements by their attributes or special states. This makes tests more precise and reliable.

When you want to select an element with a specific attribute value, like input with type='email'.

When you need to find elements that are checked, hovered, or focused.

When elements don't have unique IDs or classes but have attributes you can use.

When you want to select the first or last item in a list.

When you want to test dynamic states like :hover or :disabled.

Syntax

Selenium Java

driver.findElement(By.cssSelector("tagName[attribute='value']"));
driver.findElement(By.cssSelector(":pseudo-class"));

Use square brackets [] to match attributes.

Pseudo-classes start with a colon (:), like :first-child or :checked.

Examples

Selects an input element where the type attribute equals 'checkbox'.

Selenium Java

driver.findElement(By.cssSelector("input[type='checkbox']"));

Selects a button element that is disabled.

Selenium Java

driver.findElement(By.cssSelector("button:disabled"));

Selects the first list item in a list.

Selenium Java

driver.findElement(By.cssSelector("li:first-child"));

Selects a link where the href attribute contains the word 'login'.

Selenium Java

driver.findElement(By.cssSelector("a[href*='login']"));

Sample Program

This test opens a webpage and finds elements using CSS attribute and pseudo-class selectors. It prints confirmation and details for each found element.

Selenium Java

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class CssSelectorTest {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
        WebDriver driver = new ChromeDriver();
        try {
            driver.get("https://example.com/form");

            // Select checkbox input by attribute
            WebElement checkbox = driver.findElement(By.cssSelector("input[type='checkbox']"));
            System.out.println("Checkbox found: " + checkbox.isDisplayed());

            // Select disabled button by pseudo-class
            WebElement disabledButton = driver.findElement(By.cssSelector("button:disabled"));
            System.out.println("Disabled button found: " + disabledButton.isDisplayed());

            // Select first list item
            WebElement firstItem = driver.findElement(By.cssSelector("ul li:first-child"));
            System.out.println("First list item text: " + firstItem.getText());

            // Select link containing 'login' in href
            WebElement loginLink = driver.findElement(By.cssSelector("a[href*='login']"));
            System.out.println("Login link href: " + loginLink.getAttribute("href"));

        } finally {
            driver.quit();
        }
    }
}

Important Notes

Always prefer unique attributes for selectors to avoid flaky tests.

Pseudo-classes like :hover cannot be triggered by Selenium directly; use Actions class for that.

Use *= in attribute selectors to find partial matches inside attribute values.

Summary

CSS attribute selectors match elements by attribute values.

Pseudo-class selectors match elements in special states or positions.

Using these selectors in Selenium helps find elements precisely and write stable tests.