CodeGym /Cours /Python SELF FR /Utilisation des sélecteurs CSS pour trouver des éléments ...

Utilisation des sélecteurs CSS pour trouver des éléments sur une page web

Python SELF FR
Niveau 31 , Leçon 4
Disponible

1. Rappel sur les sélecteurs CSS

Bienvenue dans notre monde où les pages HTML dévoilent leurs secrets non pas grâce à un simple claquement de doigts, mais grâce à un habile sélecteur CSS. Si tu penses que les sélecteurs CSS ne servent qu'à styliser les pages (histoire que ton site ne ressemble pas à un vieux carnet de notes scolaire), il est temps d'ouvrir ton troisième œil de scrappeur. Aujourd'hui, on va voir comment les sélecteurs CSS peuvent devenir ton outil favori pour rechercher et extraire des données.

Les sélecteurs CSS, comme une douce expression affectueuse, nous permettent de cibler des éléments HTML. Ils aident à identifier quels éléments de la page tu veux manipuler. Si une page HTML est un labyrinthe, alors les sélecteurs CSS sont le fil rouge qui te permet de trouver la sortie.

Exemples de sélecteurs CSS

  • Tag : p — sélectionne tous les éléments <p> (paragraphes).
  • Classe : .classname — sélectionne tous les éléments avec la classe donnée.
  • ID : #idname — sélectionne un élément avec l'ID spécifique.
  • Combinaisons : div > p — sélectionne tous les <p> qui sont des enfants directs de <div>.

2. Utilisation des sélecteurs dans BeautifulSoup

Adieu à la vie ennuyeuse sans sélecteurs CSS dans BeautifulSoup ! Il est temps de rafraîchir notre approche. Imagine une situation : tu tombes sur un site et tu dois absolument en extraire toutes les citations des grands penseurs pour impressionner quelqu'un en entretien. Pour ça, on utilise la méthode select(), qui fonctionne spécifiquement avec des sélecteurs CSS.

Méthode select() et select_one()

La méthode select() te renverra une liste de tous les éléments correspondant à ton sélecteur. Et select_one() trouvera pour toi le tout premier élément correspondant au sélecteur, — comme un moteur de recherche qui te donne exactement ce dont tu as besoin, au lieu d'une interminable liste de résultats inutiles.

Supposons que tu as une page HTML contenant des citations :

HTML

<div class="quote">
    <h2 class="author">Pouchkine</h2>
    <p class="text">Oh là là, Pouchkine.</p>
    <a href="https://example.com" class="link">Lire la suite</a>
</div>
<div class="quote">
    <h2 class="author">Lénine</h2>
    <p class="text">Il faut apprendre, apprendre et encore apprendre.</p>
    <a href="https://example.com" class="link">Lire la suite</a>
</div>
<div class="quote">
    <h2 class="author">Staline</h2>
    <p class="text">Il y a un homme – il y a un problème, il n'y a pas d'homme – il n'y a pas de problème.</p>
    <a href="https://example.com" class="link">Lire la suite</a>
</div>

Voici comment tu peux les obtenir :

Python

from bs4 import BeautifulSoup
import requests

# Obtenir le code HTML de la page
response = requests.get('http://quotes.toscrape.com/')
soup = BeautifulSoup(response.text, 'html.parser')

# Trouver toutes les citations à l'aide des sélecteurs CSS
quotes = soup.select('.quote')

for quote in quotes:
    text = quote.select_one('.text').get_text()
    author = quote.select_one('.author').get_text()
    print(f'Citation: {text}\\nAuteur: {author}\\n')

Pratique, non ? La classe .quote nous aide à récupérer tous les éléments marqués comme citations, et .text et .author sont les éléments enfants d'où on extrait le texte de la citation et l'auteur.

3. Exemples de recherche avec des sélecteurs CSS

Pratiquons un peu pour que ton cerveau se souvienne de quoi faire face à un div avec dix classes. Les sélecteurs peuvent être utilisés pour effectuer une recherche plus ciblée des données sur les pages. Tu peux les combiner pour obtenir exactement ce que tu veux.

Sélecteur par classe et tag

Python

# Recherche de tous les liens dans un bloc de menu
menu_links = soup.select('nav.menu a')

for link in menu_links:
    print(link['href'])

Sélecteur par ID

Python

# Extraire l'en-tête principal de la page
main_heading = soup.select_one('#main-heading')
print(main_heading.text)

Combinaison de sélecteurs

Python

# Recherche de toutes les phrases dans une section surlignée
highlighted_sentences = soup.select('.highlighted p')

for sentence in highlighted_sentences:
    print(sentence.text)

4. Erreurs et comment les éviter

Ton travail de scrappeur ne sera pas toujours simple comme bonjour. Il y a des moments où les sélecteurs CSS peuvent ne pas fonctionner si :

  • La page contient un contenu dynamique qui est chargé via JavaScript.
  • Tu fais référence à un sélecteur inexistant (par exemple, une faute dans l'écriture de la classe ou de l'ID).
  • La structure HTML change, ce qui te plonge dans une scène de film d'horreur où tu cherches désespérément les bons éléments.

Pour éviter ces erreurs, assure-toi de travailler avec une version à jour et statique du document HTML, et fais attention à la précision des sélecteurs.

Application pratique

Maintenant, tu es prêt à utiliser les sélecteurs CSS dans des projets réels pour extraire des données. Cette compétence sera utile pour créer des outils d'analyse et de surveillance des prix, récupérer des actualités, et même suivre les changements sur les sites. La beauté de cette approche, c'est que même si un site change son apparence avec le CSS, ton code restera fonctionnel, car il dépend de la structure HTML et non du style.

1
Étude/Quiz
Introduction à BeautifulSoup, niveau 31, leçon 4
Indisponible
Introduction à BeautifulSoup
Introduction à BeautifulSoup
Commentaires
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION