Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
:nth-of-type and :nth-child works only up to the 9th element
See original GitHub issueNot sure where to file this bug as I’m using soupsieve via BeautifulSoup4, but here goes:
Using BeautifulSoup4 4.7.1, with SoupSieve 1.6.2, under Python 3.6.
import bs4
source = """<html><body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
</body></html>"""
soup = bs4.BeautifulSoup(source, 'lxml') # same result with html5lib
print(soup.select("div:nth-of-type(9)")) # Expect 9, is 9
print(soup.select("div:nth-child(9)")) # Expect 9, is 9
print(soup.select("div:nth-of-type(10)")) # Expect 10, is 15
print(soup.select("div:nth-child(10)")) # Expect 10, is 15
print(soup.select("div:nth-of-type(11)")) # Expect 11, is 16
print(soup.select("div:nth-child(11)")) # Expect 11, is 16
print(soup.select("div:nth-of-type(12)")) # Expect 12, finds nothing
print(soup.select("div:nth-child(12)")) # Expect 12, finds nothing
It seems to work well with single-digit index, but either returns empty or the wrong element for 10 and upwards.
(Also filed this on BS4 LaunchPad.)
Issue Analytics
- State:
- Created 5 years ago
- Comments:6 (4 by maintainers)
Top Results From Across the Web
How nth-child Works - CSS-Tricks
One thing I find a bit counter-intuitive about :nth-child is that it uses all of the siblings when determining which elements to style,...
Read more >nth-child() - CSS: Cascading Style Sheets - MDN Web Docs
Represents every <p> element in a group of siblings. This selects the same elements as a simple p selector (although with a higher...
Read more >Select every Nth element in CSS - Stack Overflow
As the name implies, :nth-child() allows you to construct an arithmetic expression using the n variable in addition to constant numbers.
Read more >CSS :nth-child() Selector - W3Schools
The :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or...
Read more >Comparing CSS Pseudo-Classes: nth-child vs nth-of-type
The nth-of-type is very similar to the nth-child pseudo-class. The main difference is that it specifically considers the type of the element ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Yeah, I got stop counting with my 16 fingers when I code 🙂 .
I did start suspecting hex values. 😃 Many thanks for a quick fix!