Selector hints

The tutorial product pages use a few common selector styles you will see on real ecommerce sites. Pick the smallest selector that identifies the value without also matching unrelated content.

Product title

Element selector

h1

Use this when the element type is unique enough on the product detail page.

Price

Class selector

.product-price

Use this when a reusable class marks the value you need.

Stock

Attribute selector

[data-stock-status]

Use this when an attribute describes the role or state of the element.

SKU

ID selector

#product-sku

Use this when the element has a unique id attribute.