Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial![](https://ecs-static.teamtreehouse.com/assets/views/marketing/shared/community-banner-white-47072046c51352fe6a69f5e691ff5700b28bb11d45197d7bdf066d9ea3f72d0c.webp)
![juliemaccluskey](https://secure.gravatar.com/avatar/24505aac00c69ae763b17ac22aaa0e74?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
juliemaccluskey
11,597 PointsPlaceholder Pseudo-Class
I am getting ready to submit the on-line registration form project, but the css validation came back with an error regarding my placeholder text pseudo-class. This is my code:
input:placeholder-shown {
text-align: right;
font-family: 'Rokkitt', serif;
font-size: 1em;
}
Not sure how else to write this rule. Doesn't seem to work any other way. Any suggestions? Thanks!!
![juliemaccluskey](https://secure.gravatar.com/avatar/24505aac00c69ae763b17ac22aaa0e74?s=60&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
juliemaccluskey
11,597 PointsI am just needing to style placeholder text in a form field - in this case, the word 'required' for the 'name' and 'email' input elements. The error code I am getting says: Unknown pseudo-element or pseudo-class :placeholder-shown. In the CSS, I tried just placeholder instead of placeholder-shown, but it doesn't work. Thanks!
2 Answers
![Jason Anello](https://secure.gravatar.com/avatar/d1304e75238ff7f216f55adc03e08ea1?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
Jason Anello
Courses Plus Student 94,610 PointsI can't see the project details so I can only go off of what you've said here.
Have you tried ::placeholder
with double colons?
::placeholder
is a pseudo element so it requires double colons.
:placeholder-shown
is a pseudo class and would require a single colon.
::placeholder
represents the placeholder text. So if you need to style the placeholder text itself then you should use that one.
:placeholder-shown
would target the input elements that are currently showing their placeholder text. It does not apply the styles to the placeholder text itself.
Try the example on this mdn page to see what it's doing: https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown
You'll see that the input element has a silver border because it is currently showing the placeholder text. Once you start typing something the border will change back to black because the input is no longer showing the placeholder text and :placeholder-shown
therefore no longer matches.
![Jason Anello](https://secure.gravatar.com/avatar/d1304e75238ff7f216f55adc03e08ea1?s=60&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
Jason Anello
Courses Plus Student 94,610 PointsI think I misunderstood where your error was coming from. I originally thought that this was maybe from an auto-grader when you submit your project but now I think you were probably talking about the w3c validation service here: https://jigsaw.w3.org/css-validator/ Is that the case?
I do get a similar error message as you when I tried it there. You're going to get the same message with ::placeholder
. Both of them will produce errors at this point.
These selectors are relatively new and their respective specifications are still in draft stage and subject to change. I'm only guessing here but I would think that the w3c doesn't want to spend time adding these things to the validator if they might be removed or significantly changed later.
You'll have to ignore these validation errors for now and just do what is required for your project.
In your comment, you indicated that you need to style the placeholder text so you should be using ::placeholder as mentioned in my answer.
You can use the non-standard names if the project requires it but it might not. Here's a table showing which browsers and versions will require the non-standard names but I would check if it is even required.
http://caniuse.com/#feat=css-placeholder
Another thing to keep in mind is that ::placeholder only supports the same properties that ::first-line
supports which you can find a list of here: https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line
This means that text-align: right;
may not work depending on the browser since it's not in that list of supported properties. It looks like you're ok with font-family
and font-size
![juliemaccluskey](https://secure.gravatar.com/avatar/24505aac00c69ae763b17ac22aaa0e74?s=60&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
juliemaccluskey
11,597 PointsThanks for the great info Jason and Steven. Yes, it was the css validator giving me the error. I actually had tried it as an element, but it wasn't working and yes, it seems the lack of support was the issue - ::-webkit-input-placeholder worked. Thank you both so much!!
![Jason Anello](https://secure.gravatar.com/avatar/d1304e75238ff7f216f55adc03e08ea1?s=60&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
Jason Anello
Courses Plus Student 94,610 PointsYou don't want to use the webkit prefix by itself because it's only going to work in the browsers that support it and not guaranteed to continue working in the future. For instance, your styling is not going to work in firefox. chrome may require the webkit prefix right now in version 56 but it won't be required in version 57 and not guaranteed to be supported going forward.
At a bare minimum you want to use the standard ::placeholder
and then you can add the other non-standard ones to have a wider coverage. Put the standard one last.
So something like this:
input::-webkit-input-placeholder {
color: red;
text-align: right;
}
input::placeholder {
color: red;
text-align: right;
}
And you can add the other non-standard ones from the caniuse site if you want to but put ::placeholder last since that's the one you want the browser to use if it understands more than one of them.
It seems repetitive but each selector needs its own rule.
Do not write it like this:
input::-webkit-input-placeholder,
input::placeholder {
color: red;
text-align: right;
}
When you have multiple selectors combined like that into one rule, the browser has to ignore the entire thing if there is even 1 selector it doesn't recognize. In this case, it wouldn't work in firefox since it doesn't recognize the webkit prefix and it won't work in chrome because it doesn't recognize the standard ::placeholder
So each one you decide to include has to be in its own rule.
![Steven Parker](https://uploads.teamtreehouse.com/production/profile-photos/969492/micro_tool_chess_set_2.jpg)
Steven Parker
230,688 PointsThe :placeholder-shown pseudo-class does not have complete browser support.
This may be why it is being indicated as an error. But there are also pseudo-elements to select the placeholder text directly, these vary by vendor but include ::placeholder, ::-webkit-input-placeholder, ::-moz-placeholder and :-ms-input-placeholder. Perhaps one of those (or a combination of them) would resolve your issue.
![juliemaccluskey](https://secure.gravatar.com/avatar/24505aac00c69ae763b17ac22aaa0e74?s=60&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
juliemaccluskey
11,597 PointsUnderstood. Thank you so much for the example. I will do it just like that. Thanks again!
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Julie,
What error are you getting and what are the requirements for this part of the project?