How to select elements by ID using CSS selectors?

To select elements by ID value the # syntax can be used. For example, #product would select any element that has product in its ID attribute like <div id="product"></div> element:

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

An important note here ID selector matches any element that contains the value in the ID list (separated by spaces). To match elements that has an exact ID value the = predicate can be used instead:

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

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.