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>
2 answers
solution1
2 ACCPTED 2014-03-29 09:19:15
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.
solution2
0 2014-03-29 03:14:40
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?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.