CSS Selector Tester validity

Question

I just found the following CSS Selector Tester:
http://www.w3schools.com/cssref/trysel.asp

Is it valid? There are strange selectors there like:

p:first
ul li:eq(0)
:contains(Duck)

For example, the following doesn't work for me:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS Selectors</title>
    <style>
        p:first {
            outline: 1px solid red;
        }
    </style>
</head>

<body>
    <div>
        <p>First paragraph</p>
        <p>Second paragraph</p>
        <p>Third paragraph</p>
    </div>
</body>

</html>

DEMO

Is *what* valid? If you are asking if those are valid examples of CSS selectors, the answer is: yes. — DA., Mar 29 '14 at 03:04
Then why can't I get them to work in Chrome? Why can't I see them in a reliable source like [this](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors)? — , Mar 29 '14 at 03:06
I stand correct, these aren't exactly usable selectors. They are somewhat valid, but in obscure ways. I've included an answer for you that hopefully explains them a bit better. — DA., Mar 29 '14 at 03:15

score 2 · Accepted Answer · edited May 23 '17 at 12:21

That page you've linked to is mistaken (cue booing and jeering at W3Schools). The selectors listed there are jQuery selectors, many of which are non-standard. They are not valid CSS selectors, even though they use a similar syntax.

Although the :first pseudo-class is defined for use with the @page rule, it is not defined for use anywhere outside it. A selector like p:first is not valid in either a style rule or a @page rule, nor is it valid in a document.querySelectorAll() call. Page selectors are a special type of selector that is described in this section of CSS2.1 as well as this section of the Paged Media module. While they are part of the CSS standard, they are not considered part of the Selectors standard or related standards, although, like jQuery selectors, they share a similar syntax.

While :first is also defined in jQuery, it functions very differently in jQuery than in a @page rule. The page you link to is obviously demonstrating jQuery's version. I would hesitate to call :first a valid selector more so a valid page selector or a jQuery selector because it's so context-sensitive, plus it obviously can't be used in a CSS stylesheet or document.querySelectorAll().

Like :first, :eq() and their related selectors are non-standard jQuery selectors. They also function very differently to :first-child, :nth-child(), etc, so while you may be able to use those selectors to emulate them to some extent in CSS, they're not exactly the same (otherwise jQuery wouldn't have created the non-standard ones). See my answer to this question for an in-depth explanation.

As mentioned, :contains() was going to be part of CSS but never made it. It's emulated in jQuery anyway, but keep in mind that it may be expensive in terms of performance and/or not work as you might expect it to.

score 0 · Answer 2 · edited May 23 '17 at 12:06

Those are (mostly) valid selectors, albeit somewhat obscure.

:first

This is a selector for styling the first page of a document when printed. Browser support seems iffy, at best. See: https://developer.mozilla.org/en-US/docs/Web/CSS/:first

In your example markup, it appears you want the first item styled, in which case you'd instead use :first-child see: https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child

:eq(0)

This is a jQuery CSS selector. In pure CSS, you'd likely use :nth-child to do the same. See: http://api.jquery.com/eq-selector/

:contains()

This selector was proposed, but never made it into the spec. See: Why doesn't the selector h3:nth-child(1):contains('a') work?

CSS Selector Tester validity

2 Answers2