[Answers](https://scrapfly.io/blog)   /  [css-selectors](https://scrapfly.io/blog/tag/css-selectors)   /  [Is it possible to select preceding siblings using CSS selectors?](https://scrapfly.io/blog/answers/how-to-select-preceding-sibling-element-css-selectors)   # Is it possible to select preceding siblings using CSS selectors?

 by [Bernardas Alisauskas](https://scrapfly.io/blog/author/bernardas) Apr 20, 2023 1 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-preceding-sibling-element-css-selectors "Share on LinkedIn")    

 

 

It's not possible to select preceding siblings using CSS selectors (unlike [following siblings](https://scrapfly.io/blog/answers/how-to-select-following-sibling-element-css-selectors)).

However, depending on your scraping stack there are several different ways to achieve this:

1. Use [XPath with preceding-sibling selector](https://scrapfly.io/blog/answers/how-to-select-sibling-elements-using-xpath).
2. Use [Beautifulsoup and Python](https://scrapfly.io/blog/posts/web-scraping-with-python-beautifulsoup#parsing-html-with-beautifulsoup) to select the preceding siblings:

python```python
from bs4 import BeautifulSoup

html = """
<div>
  <h2>Heading 1</h2>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <h2>Heading 2</h2>
  <p>Paragraph 3</p>
  <p>Paragraph 4</p>
</div>
"""
soup = BeautifulSoup(html, "html.parser")

# Find root element:
second_h2_element = soup.find_all("h2")[1]
# Select the preceding siblings using .previous_siblings property:
preceding_siblings = second_h2_element.previous_siblings
for sibling in preceding_siblings:
    print(sibling.text)
```



3. Using [Cheerio and Javascript](https://scrapfly.io/blog/posts/web-scraping-with-nodejs#css-selectors-with-cheerio) to select the preceding siblings:

javascript```javascript
const cheerio = require("cheerio");

const html = `
<div>
<h2>Heading 1</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<h2>Heading 2</h2>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</div>
`;

const $ = cheerio.load(html);

// Get the second h2 element
const second_h2_element = $("h2").eq(1);

// Select the preceding siblings of the h2 element
const preceding_siblings = second_h2_element.prevAll();

// Loop over the preceding siblings and print their text content
preceding_siblings.each(function() {
  console.log($(this).text());
});
```





 

   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-preceding-sibling-element-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-preceding-sibling-element-css-selectors) [ Grok ](https://x.com/i/grok?text=Summarize%20this%20page%3A%20https%3A%2F%2Fscrapfly.io%2Fblog%2Fanswers%2Fhow-to-select-preceding-sibling-element-css-selectors) [ Perplexity ](https://www.perplexity.ai/search/new?q=Summarize%20this%20page%3A%20https%3A%2F%2Fscrapfly.io%2Fblog%2Fanswers%2Fhow-to-select-preceding-sibling-element-css-selectors) [ Claude ](https://claude.ai/new?q=Summarize%20this%20page%3A%20https%3A%2F%2Fscrapfly.io%2Fblog%2Fanswers%2Fhow-to-select-preceding-sibling-element-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) [  

 http 

### What is HTTP 406 Error? (Not Acceptable)

HTTP status code 406 generally means wrong Accept- header family configuration. Here's how to prevent it.

 

 ](https://scrapfly.io/blog/posts/what-is-http-error-406-not-acceptable) [  

 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 sibling elements in XPath? ](https://scrapfly.io/blog/answers/how-to-select-sibling-elements-using-xpath)
- [ Q How to select following siblings using CSS selectors? ](https://scrapfly.io/blog/answers/how-to-select-following-sibling-element-css-selectors)
- [ Q How to select HTML elements by text using CSS Selectors? ](https://scrapfly.io/blog/answers/how-to-select-elements-by-text-using-css-selectors)
- [ Q How to use CSS selectors in NodeJS when web scraping? ](https://scrapfly.io/blog/answers/how-to-use-css-selectors-in-nodejs)
 
  



   



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