CSS Selector Syntax · CSS Selectors and XPath in Selenium | Selenium

CSS Selector Syntax

The HTML Under Test

<div class="product-card" data-id="101">
  <h3 class="title">Nike Revolution 7</h3>
  <span class="price">₹1,299</span>
  <button id="add-to-cart" class="btn btn-primary" data-testid="add-101">Add to Cart</button>
</div>

Basic CSS Patterns

Pattern	Selector	Matches
id	`#add-to-cart`	the button
class	`.product-card`	the card div
several classes	`.btn.btn-primary`	element with both classes
tag + class	`span.price`	the price
descendant (space)	`.product-card .title`	h3 anywhere inside the card
direct child (>)	`.product-card > button`	button that is a direct child
nth child	`.product-card:nth-child(2)`	second card in its parent

String name = driver.findElement(By.cssSelector(".product-card .title")).getText();
String price = driver.findElement(By.cssSelector("span.price")).getText();