September 11, 2011

CSS Selectors

Have you ever wondered:
  • How many selectors does CSS have?
  • Which selectors come from which version of CSS?
  • How does each selector work?

Me too! so here's what I found out with an example for each one.

CSS 1
E → an element of type E
div

/* selects any div element in the document */
E F → an F element descendant of an E element
div p

/* selects any p element that is a descendant of a div element */
E.warning → an E element whose class is "warning"
.banner

/* selects any element whose class is "banner" */
E#myid → an E element with ID equal to "myid".
#footer

/* selects an element with ID equal to "footer" */
E:link → an E element being the source anchor of a hyperlink of which the target is not yet visited
a:link

/* selects any unvisited a element */
E:visited → an E element being the source anchor of a hyperlink of which the target is already visited
a:visited

/* selects any visited a element */
E:active → an E element currently being selected
a:active

/* selects any a element currently being selected */
E:first-line → the first formatted line of an E element
p:first-line

/* selects the first formatted line of any p element */
E:first-letter → the first formatted letter of an E element
p:first-letter

/* selects the first formatted letter for any p element */
E, F → an element of type E and an element of type F
label, span

/* not really a selector, it's a way of grouping them */
According to the CSS 1 spec: "Anchor pseudo-classes have no effect on elements other than 'A'".

Also, CSS 1 and CSS 2.1 use a single colon to refer to the first-line pseudo-class (:first-line) but CSS 3 uses two colons (::first-line).

CSS 2.1
Includes all previous ones and adds these in:

* → any element
*

/* selects any element */
E > F → an F element child of an E element
div > p

/* selects any p elements that are direct children of a div element */
E:first-child → an E element, first child of its parent
p:first-child

/* selects a p element, the first child of its parent */
E:hover → an E element when it's hovered over
a:hover

/* selects any a element when it's hovered over */
E:focus → an E element while it has the focus
input:focus

/* selects any input element while it has the focus */
E:lang(fr) → an element of type E in language "fr"
*:lang(fr)

/* selects any element which language matches french*/
E[foo] → an E element with a "foo" attribute
img[title]

/* selects any img element with a title attribute */
E + F → an F element immediately preceded by an E element
div + span

/* selects any span element immediately preceded by a sibling div element */
E[foo="bar"] → an E element whose "foo" attribute value is exactly equal to "bar"
p[class="example"]

/* selects any p element whose class attribute is exactly equal to "example" */
E[foo~="bar"] → an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"
a[title~="copyright"]

/* selects any a element whose title attribute value is a list of
whitespace-separated values, one of which is exactly equal to "copyright" */
E[foo|="en"] → an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en"
*[lang|="en"]

/* selects any element whose lang attribute has a hyphen-separated list of
values beginning (from the left) with "en" */

CSS 3
Includes all previous ones and adds these in:

E[foo^="bar"] → an E element whose "foo" attribute value begins exactly with the string "bar"
object[type^="image/"]

/* selects any object element whose type attribute value begins with "image/" */
E[foo$="bar"] → an E element whose "foo" attribute value ends exactly with the string "bar"
a[href$=".html"]

/* selects any a element whose href attribute value ends with ".html" */
E[foo*="bar"] → an E element whose "foo" attribute value contains the substring "bar"
p[title*="hello"]

/* selects any p element whose title attribute value contains the
substring "hello" */
E:root → an E element, root of the document
:root

/* selects the root of the document, i.e. the HTML element */
E:nth-child(n) → an E element, the n-th child of its parent
tr:nth-child(0n+3)

/* selects any tr element that is the third child of its parent */
E:nth-last-child(n) → an E element, the n-th child of its parent, counting from the last one
tr:nth-last-child(-n+2)

/* selects any tr element that is one of the two last rows of an HTML table */
E:nth-of-type(n) → an E element, the n-th sibling of its type
p:nth-of-type(odd)

/* selects any p element with odd position */
E:nth-last-of-type(n) → an E element, the n-th sibling of its type, counting from the last one
p:nth-of-type(even)

/* selects any p element with even position, starting from the last */
E:last-child → an E element, last child of its parent
ol > li:last-child

/* selects any li element which is a last child of an ol element */
E:first-of-type → an E element, first sibling of its type
dt:first-of-type

/* selects any dt element that is the first sibling of its type */
E:last-of-type → an E element, last sibling of its type
td:last-of-type

/* selects any td element that is the last sibling of its type */
E:only-child → an E element, only child of its parent
tr:only-child

/* selects any tr element that is an only child */
E:only-of-type → an E element, only sibling of its type
p:only-of-type

/* selects any p element which is the only of its type in a parent */
E:empty → an E element that has no children (including text nodes)
div:empty

/* selects any empty div element */
E:target → an E element being the target of the referring URI
p:target

/* selects any p element that is the target element of the referring URI */
E:enabled → a user interface element E which is enabled
input:enabled

/* selects any input element that is in a enabled state */
E:disabled → a user interface element E which is disabled
input:disabled

/* selects any input element that is in a disabled state */
E:checked → a user interface element E which is checked
input:checked

/* selects any input element that is selected or is toggled "on" */
E:not(s) → an E element that does not match simple selector s
button:not([disabled])

/* selects all button elements that are not disabled*/
E ~ F → an F element preceded by an E element
div ~ p

/* selects any p element that is a sibling to any div element */

Sources:
Cascading Style Sheets, level 1
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1)
Selectors Level 3

2 comments:

  1. Hi..I always feel difficult with the selectors in CSS.U have made the best part of it with good and simple syntax to understand.Thanks for sharing !

    web design company

    ReplyDelete
  2. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
    Vee Eee Technologies

    ReplyDelete