[Answers](https://scrapfly.io/blog)   /  [css-selectors](https://scrapfly.io/blog/tag/css-selectors)   /  [How to select elements by attribute using CSS selectors?](https://scrapfly.io/blog/answers/how-to-select-elements-by-attribute-containing-value-css-selectors)   # How to select elements by attribute using CSS selectors?

 by [Bernardas Alisauskas](https://scrapfly.io/blog/author/bernardas) Apr 20, 2023 2 min read [\#css-selectors](https://scrapfly.io/blog/tag/css-selectors) 

 [  ](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fscrapfly.io%2Fblog%2Fanswers%2Fhow-to-select-elements-by-attribute-containing-value-css-selectors "Share on LinkedIn")    

 

 

CSS selectors allow selecting elements by any attribute value such as `class`, `id`, `href` etc. This means we can extract any HTML elements based on attribute value with CSS selectors.

While `class` and `id` have special notation shortcuts - `.` and `#` respectively - any attribute can be selected using the attribute selector (`[attribute]`) which supports multiple operators:

1. The `=` match can be used for exact equality e.g. `[attr=match]` :

<div> <div title="product">select</div> <div title="sold-product">ignore</div> </div> 2. The `~=` turns the attribute into an array of space-separated values and checks whether it contains the match (similar to `.class` and `#id` matches):

<div> <div title="product">select</div> <div title="sold product new">select</div> <div title="sold-product">ignore</div> </div> 3. The `|=` checks for exact equality except ignores hypen suffixes (e.g. `-language`):

<div> <div title="product">select</div> <div title="product-language-en">select</div> <div title="sold-product">ignore</div> <!-- it checks exact match so will not match if suffixed value is in the middle --> <div title="new product-language-en disabled">ignore</div> </div> 4. The `^=` checks whether the attribute **starts** with the match:

<div> <div title="product1">select</div> <div title="product2">select</div> <div title="product3">select</div> <div title="4product">ignore</div> </div> 5. The `$=` checks whether the attribute **ends** with the match:

<div> <div title="1product">select</div> <div title="2product">select</div> <div title="3product">select</div> <div title="product4">ignore</div> </div> 6. The `*=` checks whether the attribute **contains** the match:

<div> <div title="1product-en">select</div> <div title="2product-de">select</div> <div title="prod-duct">ignore</div> </div> Finally, to make all of these matches **case insensitive** add `i` before the closing bracket, e.g. `[attr=match i]`



 

   Table of Contents















 

   Join the Newsletter  Get monthly web scraping insights 

 

  



Scale Your Web Scraping

Anti-bot bypass, browser rendering, and rotating proxies, all in one API. Start with 1,000 free credits.

  No credit card required  1,000 free API credits  Anti-bot bypass included 

 [Start Free](https://scrapfly.io/register) [View Docs](https://scrapfly.io/docs/onboarding) 

 Not ready? Get our newsletter instead. 

 

## Explore this Article with AI

 [ ChatGPT ](https://chat.openai.com/?q=Summarize%20this%20page%3A%20https%3A%2F%2Fscrapfly.io%2Fblog%2Fanswers%2Fhow-to-select-elements-by-attribute-containing-value-css-selectors) [ Gemini ](https://www.google.com/search?udm=50&aep=11&q=Summarize%20this%20page%3A%20https%3A%2F%2Fscrapfly.io%2Fblog%2Fanswers%2Fhow-to-select-elements-by-attribute-containing-value-css-selectors) [ Grok ](https://x.com/i/grok?text=Summarize%20this%20page%3A%20https%3A%2F%2Fscrapfly.io%2Fblog%2Fanswers%2Fhow-to-select-elements-by-attribute-containing-value-css-selectors) [ Perplexity ](https://www.perplexity.ai/search/new?q=Summarize%20this%20page%3A%20https%3A%2F%2Fscrapfly.io%2Fblog%2Fanswers%2Fhow-to-select-elements-by-attribute-containing-value-css-selectors) [ Claude ](https://claude.ai/new?q=Summarize%20this%20page%3A%20https%3A%2F%2Fscrapfly.io%2Fblog%2Fanswers%2Fhow-to-select-elements-by-attribute-containing-value-css-selectors) 



 ## Related Articles

 [  

 data-parsing css-selectors 

### Parsing HTML with CSS Selectors

Introduction to using CSS selectors to parse web-scraped content. Best practices, available tools and common challenges ...

 

 ](https://scrapfly.io/blog/posts/parsing-html-with-css) [     

 data-parsing css-selectors 

### Ultimate CSS Selector Cheatsheet for Web Scraping and HTML Parsing

CSS selectors is a powerful HTML querying protocol which is used by browsers to determine what HTML elements to style. I...

 

 ](https://scrapfly.io/blog/posts/css-selector-cheatsheet) [  

 python ai 

### Find Web Elements with ChatGPT and XPath or CSS selectors

ChatGPT is becoming a popular assistant in web scraper development. In this article, we'll take a look at how to use it ...

 

 ](https://scrapfly.io/blog/posts/finding-web-selectors-with-chatgpt) 

  ## Related Questions

- [ Q How to select elements by ID using CSS selectors? ](https://scrapfly.io/blog/answers/how-to-select-elements-by-id-css-selectors)
- [ Q XPath vs CSS selectors: what's the difference? ](https://scrapfly.io/blog/answers/xpath-vs-css-selectors)
- [ Q How to select elements by class using CSS selectors? ](https://scrapfly.io/blog/answers/how-to-select-elements-by-class-css-selectors)
- [ Q How to use XPath selectors in Python? ](https://scrapfly.io/blog/answers/how-to-use-xpath-selectors-in-python)
 
  



   



 Scale your web scraping effortlessly, **1,000 free credits** [Start Free](https://scrapfly.io/register)