Checking the validity of CSS selectors

Question

Checking the validity of CSS selectors

I recently came across a CSS Selector Tester tool at the following link:
http://www.w3schools.com/cssref/trysel.asp

Is this tool reliable? It showcases some unique selectors such as:

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

However, I encountered an issue with the following code snippet:

<!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

html css css-selectors

Answer 1

Answer №1

It appears that the information provided on the linked page is incorrect (cue the sounds of discontent directed towards W3Schools). The selectors listed there are specifically for jQuery, which are considered non-standard and not valid CSS selectors despite their similar syntax.

While the :first pseudo-class is designated for use within the @page rule, it is not meant to be utilized elsewhere. For example, a selector like p:first is not valid in a style rule, @page rule, or even in a document.querySelectorAll() function. Page selectors are unique selectors explained in detail in the CSS2.1 documentation and Paged Media module documentation. Although they are part of the CSS standard, they are separate from the Selectors standard, resembling jQuery selectors only in terms of syntax.

Regarding :first, it is also defined in jQuery but functions differently compared to its usage in a @page rule. The page you referenced demonstrates jQuery's interpretation of :first. It may be more accurate to consider :first as a valid page selector or jQuery selector due to its context-specific nature, incapable of being used in CSS stylesheets or document.querySelectorAll().

Similar to :first, :eq() and related selectors are exclusive to jQuery and differ significantly from CSS equivalents like :first-child and :nth-child(). While CSS can mimic some functionalities using traditional selectors, jQuery introduced these unique selectors for specific purposes. Refer to my response to this query for a detailed explanation.

Furthermore, although :contains() was initially planned for inclusion in CSS specifications, it never materialized. Its functionality has been replicated in jQuery; however, caution must be exercised due to potential performance impact or unexpected behavior.

Answer 2

It appears that the information provided on the linked page is incorrect (cue the sounds of discontent directed towards W3Schools). The selectors listed there are specifically for jQuery, which are considered non-standard and not valid CSS selectors despite their similar syntax.

While the :first pseudo-class is designated for use within the @page rule, it is not meant to be utilized elsewhere. For example, a selector like p:first is not valid in a style rule, @page rule, or even in a document.querySelectorAll() function. Page selectors are unique selectors explained in detail in the CSS2.1 documentation and Paged Media module documentation. Although they are part of the CSS standard, they are separate from the Selectors standard, resembling jQuery selectors only in terms of syntax.

Regarding :first, it is also defined in jQuery but functions differently compared to its usage in a @page rule. The page you referenced demonstrates jQuery's interpretation of :first. It may be more accurate to consider :first as a valid page selector or jQuery selector due to its context-specific nature, incapable of being used in CSS stylesheets or document.querySelectorAll().

Similar to :first, :eq() and related selectors are exclusive to jQuery and differ significantly from CSS equivalents like :first-child and :nth-child(). While CSS can mimic some functionalities using traditional selectors, jQuery introduced these unique selectors for specific purposes. Refer to my response to this query for a detailed explanation.

Furthermore, although :contains() was initially planned for inclusion in CSS specifications, it never materialized. Its functionality has been replicated in jQuery; however, caution must be exercised due to potential performance impact or unexpected behavior.

Answer 3

Answer №2

Those selectors are valid, although they may be considered somewhat uncommon.

:first

This selector is used for styling the first page of a document when it is printed. However, browser support for this selector can be inconsistent. For more information, you can visit: https://developer.mozilla.org/en-US/docs/Web/CSS/:first

In the example markup provided, it seems like you want to style the first item. In that case, you should use :first-child instead. You can learn more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child

:eq(0)

This is a jQuery CSS selector. If you were using pure CSS, you would probably use :nth-child instead. More information on this selector can be found at: http://api.jquery.com/eq-selector/

:contains()

Although this selector was proposed, it did not actually make it into the specification. You can read more about it here: Why doesn't the selector h3:nth-child(1):contains('a') work?

Answer 4

Those selectors are valid, although they may be considered somewhat uncommon.

:first

This selector is used for styling the first page of a document when it is printed. However, browser support for this selector can be inconsistent. For more information, you can visit: https://developer.mozilla.org/en-US/docs/Web/CSS/:first

In the example markup provided, it seems like you want to style the first item. In that case, you should use :first-child instead. You can learn more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child

:eq(0)

This is a jQuery CSS selector. If you were using pure CSS, you would probably use :nth-child instead. More information on this selector can be found at: http://api.jquery.com/eq-selector/

:contains()

Although this selector was proposed, it did not actually make it into the specification. You can read more about it here: Why doesn't the selector h3:nth-child(1):contains('a') work?

Checking the validity of CSS selectors

Answer №1

Answer №2

Similar questions

Do not apply tailwindcss styles to Material-UI

What is the best way to keep the footer at the bottom and make it fixed in Material UI?

Utilize an iframe input field to initiate a Jquery event

Although the Flexbox is configured with 0 gap and margin, there remains a slight space between rows

Guide on adjusting the size of an image based on either its width or height dimensions

Is there a way to make the fixed table header scroll along with the table body data?

Collapsed on Load Vertical Collapsible Panel - Initially hidden panel on page load

CSS Positioning of Fixed/Absolute <div>

Using jQuery and Ajax to fade in content after all images and other assets have finished loading

Error message: ngRepeat does not allow duplicate elements in an array

Header text refuses to cooperate and center itself

Steps to transform an HTML form template into an HTML string

Enhancing the appearance of div content in Angular by utilizing local template variables and material elements

HTML5's drag-and-drop feature, including nested targets, allows for intuitive and interactive user

Tips for Implementing Color-coded Manchu/Mongolian Script on Your Website

What is the best method for combining elements from various arrays into a single array?

Utilizing JQuery to ensure that rows have consistent height in two dynamically generated tables

Prevent IonContent from scrolling to the bottom or top when using Ionic framework

Synchronize the hiding and displaying of elements with a corresponding element

Enhance the appearance of specific wordpress usernames by adding a touch of "flair" next to them