Guide to Using CSS Selectors and XPaths on the DOM

CSS Selectors

CSS selectors allow you to select and style HTML elements efficiently. They are widely used in styling and JavaScript DOM manipulation.

Selector	Description	Example	Matches
`*`	Selects all elements	`*`	`<div>`, `<p>`, `<h1>`
`tagname`	Selects elements by tag	`p`	`<p>Paragraph</p>`
`#id`	Selects an element by ID	`#main`	`<div id="main">`
`.class`	Selects elements by class	`.btn`	`<button class="btn">Click</button>`
`element1, element2`	Selects multiple elements	`h1, p`	`<h1>Title</h1><p>Text</p>`

Selector	Description	Example	Matches
`ancestor descendant`	Selects nested elements	`div p`	All `<p>` inside `<div>`
`parent > child`	Selects direct children	`div > p`	Only direct `<p>` children of `<div>`
`element + sibling`	Selects next sibling	`h1 + p`	The first `<p>` after `<h1>`
`element ~ siblings`	Selects all following siblings	`h1 ~ p`	All `<p>` after `<h1>`

Selector	Description	Example	Matches
`[attr]`	Elements with attribute	`[disabled]`	`<button disabled>`
`[attr="value"]`	Exact match	`[type="text"]`	`<input type="text">`
`[attr^="value"]`	Starts with	`[href^="https"]`	`<a href="https://">`
`[attr$="value"]`	Ends with	`[src$=".jpg"]`	`<img src="image.jpg">`
`[attr*="value"]`	Contains	`[class*="btn"]`	`<button class="btn-primary">`

Selector	Description	Example	Matches
`:first-child`	First child of parent	`p:first-child`	First `<p>` inside a parent
`:last-child`	Last child of parent	`p:last-child`	Last `<p>` inside a parent
`:nth-child(n)`	Specific child	`li:nth-child(2)`	The second `<li>` in a list
`:hover`	When hovered	`button:hover`	When hovering over `<button>`
`:focus`	When focused	`input:focus`	A focused `<input>`

XPath is a powerful query language for selecting elements in XML and HTML. It is commonly used in web scraping and automation.

Expression	Description	Example	Matches
`/`	Root node	`/html`	The `<html>` element
`//`	Any descendant	`//p`	All `<p>` elements
`.`	Current node	`./span`	`<span>` inside current node
`..`	Parent node	`../div`	Parent `<div>`

Selector	Description	Example	Matches
`//tagname`	Selects all matching tags	`//h2`	All `<h2>` elements
`//tagname[@attr="value"]`	Attribute match	`//a[@class="nav"]`	`<a class="nav">`
`//tagname[text()="text"]`	Exact text match	`//button[text()="Submit"]`	`<button>Submit</button>`

Function	Description	Example	Matches
`contains()`	Partial match	`//p[contains(text(), "Hello")]`	Any `<p>` with “Hello” in text
`starts-with()`	Starts with match	`//input[starts-with(@name, "user")]`	`<input name="username">`
`position()`	Selects nth element	`//li[position()=1]`	First `<li>`
`last()`	Last element	`//tr[last()]`	Last `<tr>` in a table

Selector	Description	Example	Matches
`//div//p`	All `<p>` inside `<div>`	`//div//p`	Nested `<p>` elements
`//div/p`	Direct `<p>` children of `<div>`	`//div/p`	Immediate children
`//*[@id="header"]//a`	All `<a>` under element with `id="header"`	`//*[@id="header"]//a`	Any nested `<a>`