Scraping Data: A guide to extracting width values from CSS style tags using Scrapy and CSS selectors

I've recently started learning scrapy and I'm struggling to extract the width from a div using a CSS Selector. No matter how hard I try, I can only find solutions using xpath instead of css selectors.

Here is the HTML code snippet:

<div class="stars-container">
   <div class="stars" style="width: 60.606%"> Rating</div>
</div>

When I get the response from the scrapy shell URL, I've tried the following to select the width from the above html:

response.css('.stars-container .stars ::attr(width)')
response.css('.stars-container  ::attr(width)')

If someone could help me solve this problem easily, it would be greatly appreciated. Thank You

Answer â„–1

For those looking to specifically extract the width value using only CSS, here is a snippet that can achieve that:

response.css('.stars-container .stars::attr(style)').re_first('width:\s*(\d+\.\d+)\s*%')

Answer â„–2

Learn how to retrieve the width with this code snippet.

response.css('.stars-container .stars ::attr(style)').re_first(r'width:\s+(\d+.\d+)')

It's important to familiarize yourself with Python's regex library. You can access the documentation here.

Answer â„–3

Assistance is available for you.

 response.css(".stars-container .stars").xpath('@style').extract()

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking to incorporate HTML5 videos into a responsive Bootstrap carousel?

I've been working on creating a carousel that includes videos. When it comes to images, everything works smoothly as they are responsive even in mobile view. However, I'm encountering an issue with videos where the width is responsive but the hei ...

When there are spaces in the button, it will result in the button creating a new line within the Navbar

There is a line break in the navbar when a space is added to the button text The CSS for the Navbar is manually inputted (Utilizes Bootstrap) <img src="images/SCP_Logo.jpg" style='width: 100%; max-width:100%;'> & ...

How to target the DIV elements that have at least one unordered list (UL) inside using CSS selector or JavaScript

Imagine a hierarchy structured like this: <div class="first_level"> <div class="second_level_1"> <div class="third_level_1"> <div class="fourth_level_1"> <ul><li></li><li></li></ ...

Having trouble getting Bootstrap 4 SCSS overrides to take effect?

Let's dive into a quote from the Bootstrap documentation: Each Sass variable in Bootstrap 4 comes with the !default flag, allowing you to modify the default value in your own Sass even after that original variable has been set. Here is the content ...

How can I implement horizontal scrolling on a material-ui table containing numerous columns?

As I work with the React Material-UI framework, I am using this table example as a guide. However, I am facing an issue where my table becomes overcrowded when I have numerous columns, causing the content to be cut off. I recently came across the material ...

What is the best way to have text wrap around an icon in my React application?

I am facing an issue while trying to display the note description over the trash icon in a React app. I have tried various methods but can't seem to achieve the desired effect. Can anyone guide me on how to get this layout? Here is what I intend to a ...

How to position div elements side by side using CSS and center them, even on IE8

UPDATE: I have discovered that implementing Bart's solution is the correct one. With a 264px wide div containing the other divs and their 1px borders, I achieved the desired effect. I have updated my code to include his answer. Thank you, Bart. Once ...

The background is set and the vertical scrolling overflow is enabled

My website has an image set as the background, with a fixed position and overflow-y to allow scrolling. However, I have encountered an issue where the height of the image is causing problems on certain displays and resolutions. To temporarily fix this pro ...

Symbol '%' is not supported in Internet Explorer

My experience with IE versions 8 and 9 has been that they do not recognize the &percnt; entity. I have tested this on two different computers. I found information suggesting that it should be supported in IE here: http://code.google.com/p/doctype/wiki ...

Assigning a class to a header upon loading the page from various sections at random

After scrolling, I used JavaScript to add a class to <header>. Here is the code snippet: $(window).scroll(function(){ var top = $(window).scrollTop(); if(top>=1){ $("header").addClass('bg-header'); } else ...

Troubles with Bootstrap's column functionality causing issues

Trying to create a menu using Bootstrap, but experiencing issues with the 'col' class not working correctly. Here is the sample HTML code provided: <div class="logo col"> <a href="index.html"><img src="C ...

Is there a way I can turn off the dragging functionality in my situation?

Is there a method to disable the dragging functionality within a draggable element? $('#dragitem').draggable({ scroll : false, drag: function(event, ui){ //check if condition is met if(†...

Styling for main banner image on large desktop screens and mobile devices

I need help with website design and CSS solutions. Currently, I have a WordPress website with a onepager theme. At the top of the page, there is an image that almost fills the screen along with a title. My concern is how this image behaves with different b ...

Enhancing React-Admin with custom Material-UI theme overrides for targeted CSS selectors on a global scale

When working with React-Admin, I encountered a challenge in applying specific CSS code globally within my Material UI theme. As I set up my theme, I included the following lines in the overrides section: overrides: { "@global": { &quo ...

Enhance the aesthetic appeal of the Search and Filters component in ASP.NET Core using Bootstrap styling

I am struggling to enhance the style and layout of multiple search filters on the page so that the User Experience is improved. I'm unsure how to effectively design this search component. <section class="search-sec"> <div class=&qu ...

Guide to customizing the CSS styles of various components within a Material UI Dialog

Let's take a look at this snippet for creating a Material Dialog in code: <Dialog open={this.props.open} onClose={this.props.closeAtParent} PaperProps={{ style: { minHeight: '75vh', minWidth: '75vw', ...

"Step-by-step guide on placing an order for the button

I am currently working with material-ui and encountering a roadblock. My goal is to design a homepage for a dashboard where the various services are listed. I am attempting to organize these 6 buttons into 2 rows and 3 columns, totaling 6 buttons in all. A ...

Python is throwing an AttributeError stating that the 'module' object does not have the attribute 'windll'

My current task involves automating a web application where I need to click on a link that opens a print window. Unfortunately, selenium automation does not seem to work for this specific action, so I turned to using ctypes to simulate keypress events like ...

Generate additional tabs

Currently, I am in the process of working on a project where I have a bar that will contain dynamically filled tabs. My goal is to include a (+) image that becomes visible when the bar is full. When a user clicks on this image, the remaining tabs should ap ...

How to center a container in HTML using Bootstrap techniques

Here is the code I have been working on: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="span4 offset4 centered"> <div class="container overflow-hidden"> < ...