CSS Selector Behavior

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.


gertrude

This post was duplicated from another blog of mine. From now on, I’ll be posting web help here, on this blog.

By the way, Urban Dictionary says “trippy” is a relatively new word with its roots in the word “trip,” from the 60s. That’s wrong. The word “trippy” comes from those days, too. Sheesh. Well at least all of you who think that is a new word don’t need it explained.

Hugs.

Leave a Reply

Your email address will not be published. Required fields are marked *