Skip to main content
Practice

Data Extraction Using CSS Selectors

CSS selectors are used to select specific elements among many HTML elements.


Basic CSS Selectors​

  1. Class Selector: Using .classname format, it selects all elements with the specified class.

  2. ID Selector: Using #idname format, it selects the element with the specified ID.

  3. Element Selector: Using tagname format, it selects all elements with the specified tag.


Using CSS Selectors with BeautifulSoup​

The select() method of BeautifulSoup can be used to find elements with CSS selectors.

Finding Elements with CSS Selectors
soup = BeautifulSoup(html_doc, 'html.parser')
# Find all elements with the class 'my-class'
class_elements = soup.select('.my-class')

# Find the element with ID 'my-id'
id_element = soup.select('#my-id')

# Find all <a> tags
a_elements = soup.select('a')

Extracting Text Data​

  • Use the .text attribute on elements found with CSS selectors to extract their text content.
Extracting Text Data
soup = BeautifulSoup(html_doc, 'html.parser')

# Extract text from elements with the class 'my-class'
for el in soup.select('.my-class'):
    print(el.text)

# Extract text from the element with the ID 'my-id'
print(soup.select_one('#my-id').text)

Extracting Attribute Values​

  • You can extract the value of specific attributes (e.g., href, src) from elements.
Extracting Attribute Values
# Extract href attribute values from all <a> tags
for a in soup.select('a'):
    print(a.get('href'))

# Extract src attribute values from image tags (<img>)
for img in soup.select('img'):
    print(img.get('src'))

Usage Example​

Usage Example
html_doc = """
<div class="content">
  <p class="info">This is a paragraph.</p>
  <a href="http://example.com">Example Link</a>
</div>
"""

soup = BeautifulSoup(html_doc, 'html.parser')

# Extract text from <p> tag with class 'info'
info_text = soup.select_one('.info').text
print(info_text)

# Extract URLs from all links (<a>)
for link in soup.select('a'):
    print(link.get('href'))

Practice​

Click the Run Code button on the right side of the screen to check the crawling results or modify the code!

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.