CSS Selector & XPath Masterclass

Learn how to select elements by class with the dot notation in CSS, applying a product class to target product cards and style borders so only those cards are affected.

select elements by single and multiple classes using CSS selectors, apply borders to product cards, and create a banana-specific style by adding an extra class, enabling a yellow border.

Explore css selector & xpath masterclass by combining tag name with class selectors to target product titles using the class title. Demonstrate precise styling by turning edge two titles blue.

Learn how to select web elements by id using CSS hash selectors, replacing class selectors with the id name, and apply styling like borders to id-based elements.

Explore descendant selectors in CSS to target paragraphs inside a product container, apply gray color precisely, and avoid altering unrelated header or subtitle text.

Explore selecting paragraphs inside the product class, then use the direct child selector to target only those directly under the product and apply color changes.

Learn to select elements by siblings using the hero class and following siblings in css, applying a border to product elements that share the same parent.

Discover how to use the next-sibling selector to target following elements and apply styles like gray to specific paragraphs, using the plus operator to select only directly subsequent siblings.

Learn to select elements by attributes and values with CSS attribute selectors, then apply styles like background color and borders, including an image with alt banana and a yellow border.

Master selectors that target elements by attribute values, using starts-with and ends-with syntax to match image sources and apply styles precisely to dynamic URLs.

Master css selectors by matching element attributes with starts-with, ends-with, and contains operators, using image src examples and border styling to highlight matches.

Learn to use the not function in css selectors to exclude elements that do not match a given attribute, using colon notation and parentheses.

Explore how to use CSS selectors to target elements by position, including first-child and last-child, with practical examples using body, div, nav, ul, li, and links.

Master targeted styling with nth-child and nth-last-child selectors to choose items by position or type, then apply borders or backgrounds to banana, guava, and other list items.

Explore css selector theory with the nth-child patterns, using even and odd keywords to color alternating items, select specific indices, and apply patterns like 2n minus 1 to shift elements.

Learn how the only-child selector targets an element that is the sole child of its parent. Apply a background color to highlight it and explore only-of-type selectors in CSS.

Explore CSS pseudo selectors to target element states such as hover, focus, and active, and apply effects like scale and box-shadow to a product element.

Explore input field states in CSS, including normal, hover, focus, disabled, required, optional, and read-only, plus styling placeholders with the ::placeholder pseudo-element.

Learn to style link elements with the visited pseudo selector and the not selector in CSS, using the a tag to reflect user navigation by coloring visited links blue violet.

Learn to use CSS pseudo elements such as ::before, ::after, ::selection, ::first-letter, and ::first-line to insert and style content before, after, and within elements like headings and paragraphs.

Master XPath for querying documents and selecting web elements, demonstrated with Chrome developer tools and applicable to web scraping frameworks and automation tools like Selenium.

Learn the basics of export and how to create export expressions to select elements, using Chrome developer tools and the Sambal website for hands-on testing.

Learn to select a web element using absolute and relative paths in XPath, comparing root-based and // searches, and weighing reliability when the code changes.

Learn to select web elements by tag name using XPath tag name selectors, and use relative paths with double slashes to target h1 and p by their tag names.

Learn to target specific elements with css selectors and xpath by using hierarchical paths, direct children versus descendants, and element position with brackets.

Master how to target web elements by position and hierarchy, and refine selections with attribute-based selectors such as class, to isolate product prices in a structured layout.

Explore selecting web elements by attributes and by text using css selectors and the text function. Target elements by attribute name and value, or by button text.

Learn how to select web elements by attribute value using the starts-with function in CSS selectors and XPath, with practical examples on image sources such as image/me and image/b.

Apply the contains function in css selectors to locate elements by an attribute value, such as selecting an image whose source contains 'banana', alongside the starts with example.

Learn to apply mathematical operators in CSS selectors and XPath to select items by index, use last(), and arithmetic to target product items and prices.

Learn to use conditional operators with export selectors to target web elements by attribute values, including equals, not equals, and not, as well as greater than and less than comparisons.

Explore joining conditions with and and or operators to filter web elements by text and ranges, such as price between 0.35 and 0.85 and text matches less-than or greater-than signs.

Join two css selector queries with the pipe operator to select either of two items, such as links with the same text, using shift+backslash.

Learn to select web elements by their parent-child relationships using the child and descendant selectors, with examples like div.product and its buy button and product titles.

Learn to select the parent or ancestor of an element using the parent selector with two colons and the two-dot shorthand, and apply the ancestor selector and xpath.

Learn to select web elements by their siblings using css selectors and XPath following-sibling, with practical examples like locating a banana price from an image anchor.

Master css selector techniques by selecting elements by index with square brackets, using position function to identify element order, and applying a less-than-four condition to capture the first three items.