How to select elements by class using CSS selectors?

To select elements by class value the . symbol + value can be used. For example, .product would select any element that contains product in the class attribute:

<div> <div class="product">select</div> <div class="sold product">select</div> <div class="sold product new">select</div> <div class="product-2">ignore</div> </div>

Note that this selector matches any element that contains a class value in the class list (separated by spaces).
To match elements that contain the exact class value the predicate syntax can be used:

<div> <div class="product">ignore</div> <div class="sold product">select</div> <div class="sold product new">ignore</div> <div class="product-2">ignore</div> </div>
Question tagged: Css Selectors, Popular

Related Posts

How to Parse XML

In this article, we'll explain about XML parsing. We'll start by defining XML files, their format and how to navigate them for data extraction.

Ultimate CSS Selector Cheatsheet for HTML Parsing

Ultimate companion for HTML parsing using CSS selectors. This cheatsheet contains all syntax explanations with interactive examples.

Web Scraping With Ruby

Introduction to web scraping with Ruby. How to handle http connections, parse html files for data, best practices, tips and an example project.