Scraping from a price element which has multiple classes (spaces between class names)

If you find a price HTML element which has multiple classes in the class=”” attribute, then you should understand a bit more about how CSS works.

It’s important to know how spaces operate differently when you’re looking at HTML class attributes versus CSS to match elements.

If you’re looking at HTML then spaces in the class attribute mean this element has multiple classes.

If you’re looking at CSS then spaces in the CSS selectors indicate hierarchies.

Here’s an example:

<span class="ProductMeta__Price Price Text--subdued u-h4">Ā£15</span>

When you look at the contents of the class attribute in the raw HTML, if there are spaces then this means there areĀ multiple classes not one big single class. Spaces are not allowed in class names.

So – you might be tempted to use CSS selectors to identify your prices like this:

.ProductMeta__Price Price Text--subdued u-h4

Don’t do that – what the above technically means is:

Match elements with the .ProductMeta__Price class, and then <Price> elements within that then <Text–subdued> elements within that, then <u-h4> elements within that. That will never work.

Instead, you could use this:

.ProductMeta__Price.Price.Text--subdued.u-h4

The above means: match elements with the .ProductMeta__Price classĀ andĀ the .Price classĀ andĀ then .Text–subdued classĀ andĀ the .u-h4 class.

When you’re using CSS to match elements, spaces now instead meanĀ hierarchy. For example:

.products .price

Would mean match elements with the .products class (e.g. <div class=”products”>) then within those elements match elements with the .price class (e.g. <div class=”price”>)

 


Did this article answer your question?

Leave a Reply

Your email address will not be published. Required fields are marked *


We use cookies

We use cookies for various things on our site, including our on-site chat bubble (if you use it), our comment forms (if you use them) and for session handling (if you log in).

Other than that, we use cookies to identify where traffic came from to help us understand which traffic turns into sales, we use a cookie for Google Analytics traffic analysis and we use a cookie to customise adverts for our own products we think you'll be interested in.

You can read more detail in our privacy policy page. Please click 'Accept' or 'Decline' to continue.