:nth-child() counts line breaks as spans in CSS

I was diddling around and working with this markup: I wanted to select the second <span> so, naturally: And gosh darn it was I surprised that my styles weren’t showing up! Making sure I had the syntax right, I went for: It worked! More head scratching. Hmm, OK, why not? By golly, not only did […]

The post :nth-child() counts line breaks as spans in CSS appeared first on Geoff Graham.

I was diddling around and working with this markup:

<h1>
  Hidd<span>e</span>n
  <br>
  Br<span>a</span>in
</h1>

I wanted to select the second <span> so, naturally:

.span:nth-child(2) { ... }

And gosh darn it was I surprised that my styles weren’t showing up! Making sure I had the syntax right, I went for:

.span:nth-child(1) { ... }

It worked! More head scratching. Hmm, OK, why not?

.span:nth-child(3) { ... }

By golly, not only did that work but it selected the second <span> in the process, giving me exactly what I had aimed for. CSS apparently selects <br> elements when counting :nth-child(). New to me!

And guess what? It worked when I put any dang element in place <br>. Everything, like <div>, <main>, <input>, <abbr>, <kbd>, you name it.

I can’t find anything in the Selectors Level 4 spec on the :nth-child() side of things. I also looked at the HTML Standard and came up empty on the <span> side of things. I even thought that perhaps it was just a bug with Safari, but it works across the board.

I dunno. Maybe I’m overlooking something obvious. But today I learned that :nth-child() counts all elements when it searches spans. I mean, look, it counts the only <span> inside an element when it’s the last child, like:

<!-- Not that you'd ever do this -->
<h1>
  Hidd<div>e</div>n
  <abbr></abbr>
  Br<span>a</span>in
</h1>

The post :nth-child() counts line breaks as spans in CSS appeared first on Geoff Graham.


Print Share Comment Cite Upload Translate
APA
Geoff Graham | Sciencx (2024-03-28T19:17:56+00:00) » :nth-child() counts line breaks as spans in CSS. Retrieved from https://www.scien.cx/2021/11/26/nth-child-counts-line-breaks-as-spans-in-css-2/.
MLA
" » :nth-child() counts line breaks as spans in CSS." Geoff Graham | Sciencx - Friday November 26, 2021, https://www.scien.cx/2021/11/26/nth-child-counts-line-breaks-as-spans-in-css-2/
HARVARD
Geoff Graham | Sciencx Friday November 26, 2021 » :nth-child() counts line breaks as spans in CSS., viewed 2024-03-28T19:17:56+00:00,<https://www.scien.cx/2021/11/26/nth-child-counts-line-breaks-as-spans-in-css-2/>
VANCOUVER
Geoff Graham | Sciencx - » :nth-child() counts line breaks as spans in CSS. [Internet]. [Accessed 2024-03-28T19:17:56+00:00]. Available from: https://www.scien.cx/2021/11/26/nth-child-counts-line-breaks-as-spans-in-css-2/
CHICAGO
" » :nth-child() counts line breaks as spans in CSS." Geoff Graham | Sciencx - Accessed 2024-03-28T19:17:56+00:00. https://www.scien.cx/2021/11/26/nth-child-counts-line-breaks-as-spans-in-css-2/
IEEE
" » :nth-child() counts line breaks as spans in CSS." Geoff Graham | Sciencx [Online]. Available: https://www.scien.cx/2021/11/26/nth-child-counts-line-breaks-as-spans-in-css-2/. [Accessed: 2024-03-28T19:17:56+00:00]
rf:citation
» :nth-child() counts line breaks as spans in CSS | Geoff Graham | Sciencx | https://www.scien.cx/2021/11/26/nth-child-counts-line-breaks-as-spans-in-css-2/ | 2024-03-28T19:17:56+00:00
https://github.com/addpipe/simple-recorderjs-demo