How to Find Element by CSS Selector in Selenium

In Selenium, you can find an element by CSS selector using driver.find_element(By.CSS_SELECTOR, "css_selector_here"). This method locates the first matching element on the page using the CSS selector string you provide.

Syntax

The syntax to find an element by CSS selector in Selenium is:

• driver.find_element(By.CSS_SELECTOR, "css_selector"): Finds the first element matching the CSS selector.
• driver.find_elements(By.CSS_SELECTOR, "css_selector"): Finds all elements matching the CSS selector.

Here, driver is your Selenium WebDriver instance, and By.CSS_SELECTOR tells Selenium to use CSS selector strategy.

python

from selenium import webdriver
from selenium.webdriver.common.by import By

# Initialize WebDriver (example with Chrome)
driver = webdriver.Chrome()

# Find single element by CSS selector
element = driver.find_element(By.CSS_SELECTOR, "div.content > p.intro")

# Find multiple elements by CSS selector
elements = driver.find_elements(By.CSS_SELECTOR, "ul.menu li.item")

Example

This example opens a webpage and finds a paragraph element with class intro inside a div with class content. It prints the text of the found element.

python

from selenium import webdriver
from selenium.webdriver.common.by import By
import time

# Setup WebDriver
options = webdriver.ChromeOptions()
options.add_argument('--headless')  # Run in headless mode

driver = webdriver.Chrome(options=options)

# Open example page
driver.get('https://www.w3schools.com/cssref/css_selectors.asp')

# Wait for page to load
time.sleep(2)

# Find element by CSS selector
intro_paragraph = driver.find_element(By.CSS_SELECTOR, 'div.w3-example p')

# Print the text content
print(intro_paragraph.text)

# Close the browser
driver.quit()

Output

The CSS selector is used to select elements with a specific pattern or style.

Common Pitfalls

Common mistakes when using CSS selectors in Selenium include:

• Using incorrect or overly complex selectors that do not match any element.
• Not waiting for elements to load before searching, causing NoSuchElementException.
• Confusing find_element (single element) with find_elements (list of elements).
• Using invalid CSS syntax in the selector string.

Always verify your CSS selector in browser DevTools before using it in Selenium.

python

from selenium.webdriver.common.by import By

# Wrong: Using invalid CSS selector syntax
# element = driver.find_element(By.CSS_SELECTOR, "div..content")  # Syntax error

# Right: Correct CSS selector
# element = driver.find_element(By.CSS_SELECTOR, "div.content")

Quick Reference

Action	Code Example	Description
Find single element	driver.find_element(By.CSS_SELECTOR, "selector")	Returns first matching element
Find multiple elements	driver.find_elements(By.CSS_SELECTOR, "selector")	Returns list of matching elements
CSS selector example	"div.content > p.intro"	Selects with class intro inside div with class content
Wait before find	Use WebDriverWait for element presence	Avoids errors if element loads slowly

Key Takeaways

Use driver.find_element(By.CSS_SELECTOR, "selector") to find the first matching element by CSS selector.

Always verify your CSS selector syntax in browser DevTools before using it in Selenium.

Use driver.find_elements for multiple elements and handle the returned list properly.

Wait for elements to load before searching to avoid errors.

Avoid invalid or overly complex CSS selectors to ensure reliable element location.