CSS3 Selectors

CSS3 Selectors provide new, more powerful ways to select nodes using CSS. This helps when styling complex documents or making CSS that can apply to a document as its structure changes.

Try it out!

Click 'Remove Table Row' and compare the two tables to see how the styling depends on document structure rather than targeting specific elements. This happens without running any script.
Click the checkbox to try the :checked selector.
Use the links below to search the document using that selector or enter your own selector in the input box. Selected nodes will be highlighted.

input:not(:enabled)

Disabled Input Elements

p:only-child

P Element with No Siblings

Enable Selector

This is sample content with a structure you can observe in the DOM Viewer pane to the right.

You can use the links about to run selector queries on the content in this pane. The selected node(s) will be highlighted.

If you decide that you'd like to craft a selector of your own, type it into the input box at the top of the page.

Sample checkbox control:

Sample disabled control:

Original
First Row
Second Row
Third Row
Fourth Row
Fifth Row

Edited
First Row
Second Row
Third Row
Fourth Row
Fifth Row