Well, no matter how long you program CSS, you can get tripped up by the most basic of things. Today it was psuedo element selectors. I wanted to style the placeholder text of an element to be accessible. That meant I needed a darker color. So I did this:

::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
::placeholder{
   color: #666;
}

And it didn’t work. And I couldn’t figure out why. So I looked again at the code I created, and started eliminating things. I was in chrome, and so I did this:

::-webkit-input-placeholder{
   color: #666;
}

And it worked!

So I then I did this:

::-webkit-input-placeholder,
::placeholder{
   color: #666;
}

And it didn’t work. So then I looked at some code on a site that did work. And I saw that they did it like this:

::-webkit-input-placeholder{
   color: #666;
}
::-moz-placeholder{
   color: #666;
}
:-ms-input-placeholder{
   color: #666;
}
::placeholder{
   color: #666;
}

And so I did the same. And it worked. And I scratched my head. And then I stumbled across this explanation (scroll down to Chris Coyer’s comment).

Oh, good gravy!

We are so used to being able to list styles with browser prefixes, one after another in one style block, and ones that the browser doesn’t recognize get ignored. But this is not the same with element selectors in a group.

It was a trippy morning.

---