Can I use multiple pseudo selectors focus with before/after on the same element?
css, html, pseudo-class
Solution
Pseudo elements can only be defined on container elements. Because of the way they are rendered within the container itself as a DOM element. inputs cannot contain other elements hence they're not supported. A button on the other hand, although a form element, supports them because it's a container of other sub elements.
More from the 2.1 spec
The `::after` and `::before` pseudo-elements are now using the double-colon to avoid confusion with pseudo-classes (which obviously use `:`), although older version of IE (7,8) won't recognize the double colons .. keep that in mind if your trying to support them.
Problem
I'm trying to combine using pseudo selectors with pseudo elements to create a custom tooltip. My HTML: ``` <input id='test'/> ``` My CSS: ``` #test { position: relative; } #test:focus { background-color: #08c; } #test:focus:before { position: absolute; left: 100%; width: 10px; height: 10px; background-color: black; } ``` A fiddle running the code: http://jsfiddle.net/9ujEH/ Currently the input will change to blue when focused as a result of #test:focus but the black sqaure doesn't show up like I thought it would from #test:focus:before.