Problem with using :nth-of-type(1)
I've two divs with same class name as "empty", since there are two divs with same class, I was hoping to control one specifically, the first one to be exact so I used but the style I added like display block, height 30px like these didn't work at all, on browser on console it was as if the css styles weren't there at all, it works if I just select .empty{} and now do the styling ofcourse, I'm providing the codepen link https://codepen.io/Pravinik/pen/QWeGggd
In this clone spotify login page which I’m working on right now.
Check line no. 50, 51 on html file, there will be two divs with class name as “empty” and in the css check line number 392 where I’m targetting the html element (empty) but seems not working Thanks.
1 Reply
.empty:nth-of-type(1) starts counting the same tag names (a div in your case) from the first element in the parent. although you try to select the first .empty, it is not the first div element in the parent.
It will only match if .empty is the first div in the parent
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
:nth-child(1 of .empty) should work, that will look for the first occurrence of .empty in a parent
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child#the_of_selector_syntax