Kevin Powell - Community•2y ago

:first-of-type selector behavior question

Hi, I'm trying to make a simple typing game, similar to hangman, where the user types in a word to be guessed. I want to add a visual hint to the user by using :first-of-type so that the next empty slot is highlighted. However this only works with the very first element when all slots are empty, but as the user starts typing the highlighting disappears. Probably easier to understand with a demo: https://codepen.io/D10f/pen/rNrvrzK This demo is already doing what I want, however I had to combine a second selector to make it work beyond the first slot.

.box:empty:first-of-type,
.box:not(:empty) + .box:empty {
  border-color: red;
}

.box:empty:first-of-type,
.box:not(:empty) + .box:empty {
  border-color: red;
}

Ideally and what I originally thought would work, only the first selector is needed. So, is :first-of-type working properly here or ... ? Thanks!

4 Replies

Unknown User•2y ago

Message Not Public

Joao•2y ago

I think I understand it but this parts still bugs me:

select an element if it has the given class (or is of the given type) and is the first of its type among its siblings.

In my example, I'm looking for a div with the class of box and is empty. Both of these properties at once. But as I type, the empty condition breaks and should instead jump to the next box which is now the first one that meets both criteria?

Unknown User•2y ago

Message Not Public

Joao•2y ago

Ahhh I see I think 😄 So, it's really a very narrow or specific selector in contrast to other that are more "stright forward" in that sense it uses context to make its selection Thanks a lot for the explanation

Gaming

Programming

:first-of-type selector behavior question