jQuery and CSS selectors

Question

In the past I used the following code to take the take the text in the data-placeholder attribute and use it as a placeholder text for my div.

[contentEditable=true]:empty:not(:focus):before {
    content:attr(data-placeholder)
}

This worked great, but in my current project we need to do the same thing except it's entirely built using jQuery. I know jQuery has .empty() , .before() , :not() , and .focus() functions. With the way the jQuery selectors work, is it possible to use the CSS selector in the jQuery selector like so?

var div = $([contentEditable=true]:empty:not(:focus):before);

If not, then is there a better way to do this when working with so many functions?

Answer 1

Simple solution is to append a style tag:

var rule ='[contentEditable=true]:empty:not(:focus):before {'+
   ' content:attr(data-placeholder)'+
'}';
$('head').append('<style>'+rule +'</style>');