10 replies

: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

: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

:first-of-type

working properly here or ... ? Thanks!

KP-C

Kevin Powell - Community•4y ago•

10 replies

Joao

: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

:first-of-type

.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

:first-of-type

working properly here or ... ? Thanks!

:first-of-type selector behavior question

Similar Threads

:first-of-type selector behavior question

Similar Threads

Similar Threads

Similar Threads