Posts Tagged CSS Selectors

Usefull CSS Selectors for Developers / Designers

*
:
Any element
[TagX]
:
An element of type “[TagX]”
[TagX]#myid
:
An “[TagX]” element with ID equal to “myid”
[TagX].className
:
An “[TagX]” element whose class is “className”
[TagX][className]
:
An “[TagX]” element with a “className” attribute
[TagX][className=”bar”]
:
An “[TagX]” element whose “className” attribute value is exactly equal to “bar”
[TagX][className!=”bar”]
:
An “[TagX]” element whose “className” attribute value does not equal to “bar”
[TagX][className~=”bar”]
:
An “[TagX]” element whose “className” attribute value is a list of whitespace-separated values, one of which is exactly equal to “bar”
[TagX][className^=”bar”]
:
An “[TagX]” element whose “className” attribute value begins exactly with the string “bar”
[TagX][className$=”bar”]
:
An “[TagX]” element whose “className” attribute value ends exactly with the string “bar”
[TagX][className*=”bar”]
:
An “[TagX]” element whose “className” attribute value contains the substring “bar”
[TagX][className|=”en”]
:
An “[TagX]” element whose “className” attribute has a hyphen-separated list of values beginning (from the left) with “en”
[TagX]:nth-child(n)
:
An “[TagX]” element, the n-th child of its parent
[TagX]:first-child
:
An “[TagX]” element, first child of its parent
[TagX]:last-child
:
An “[TagX]” element, last child of its parent
[TagX]:only-child
:
An “[TagX]” element, only child of its parent
[TagX]:empty
:
An “[TagX]” element that has no children (including text nodes)
[TagX]:link
:
“[TagX]” link
[TagX]:focus
:
An “[TagX]” element during certain user actions
[TagX]:enabled
:
[TagX] user interface element “[TagX]” which is enabled
[TagX]:disabled
:
[TagX] user interface element “[TagX]” which is disabled
[TagX]:checked
:
[TagX] user interface element “[TagX]” which is checked (for instance a radio-button or checkbox)
[TagX]:input
:
An “[TagX]” element that is an input element (includes textarea, select and button)
[TagX]:text
:
An “[TagX]” element that is an input text field or text area
[TagX]:checkbox
:
An “[TagX]” element that is an input checkbox
[TagX]:file
:
An “[TagX]” element that is an input file
[TagX]:password
:
An “[TagX]” element that is an input password
[TagX]:submit
:
An “[TagX]” element that is an input or button of type submit
[TagX]:image
:
An “[TagX]” element that is an input of type image
[TagX]:button
:
An “[TagX]” element that is an input or button of type button
[TagX]:reset
:
An “[TagX]” element that is an input or button of type reset
[TagX]:header
:
An header element, one of h1, h2, h3, h4, h5, h6
[TagX]:parent
:
“[TagX]” parent element, an element that contains another element
[TagX]:not(s)
:
An “[TagX]” element that does not match the selector s (multiple selectors supported)
[TagX]:contains(t)
:
An “[TagX]” element whose textual contents contains t (case sensitive)
[TagX]:first
:
An “[TagX]” element whose position on the page is first in document order
[TagX]:last
:
An “[TagX]” element whose position on the page is last in document order
[TagX]:even
:
An “[TagX]” element whose position on the page is even numbered (counting starts at 0)
[TagX]:odd
:
An “[TagX]” element whose position on the page is odd numbered (counting starts at 0)
[TagX]:eq(n)/:nth(n)
:
An “[TagX]” element whose Nth element on the page (e.g :eq(5))
[TagX]:lt(n)
:
An “[TagX]” element whose position on the page is less than n
[TagX]:gt(n)
:
An “[TagX]” element whose position on the page is less than n
[TagX] [TagY]
:
An “[TagY]” element descendant of an “[TagX]” element
[TagX] > [TagY]
:
An “[TagY]” element child of an “[TagX]” element
[TagX] + [TagY]
:
An “[TagY]” element immediately preceded by an “[TagX]” element
[TagX] ~ [TagY]
:
An “[TagY]” element preceded by an “[TagX]” element
[Tagx] & [TagY]= it can be any tag like div, span, tr, font etc..

Posted in: Uncategorized, Web Developers/Designers Reference Guide

Leave a Comment (0) →