This article will help you learn about CSS selectors. The use of CSS selectors is not only a great way to stand out from the everyday web designer, but will simplify your code and minimize the use of jQuery and javascript.

Let’s start with listing all the different types of selectors, from CSS level 1 to CSS level 3.

There are several types of CSS selectors, let’s try to define them.

Universal Selector - The universal selector ( * ) selects any element type of a qualified name. It  is common among several languages to use an * as an universal type selector.

*[hreflang|=en]

Type Selector - Represents an instance of the element type in the document tree.

p

Attribute Selector – Used to select an element based on the elements attribute.

a[href="http://www.somedomain.com/"]

Structural pseudo-classes – Permits the selection based on extra information that lies in the document tree but cannot be represented by other simple selectors or combinators.

There are several types of pseudo-classes.

:root - Represents the root element in the document.

:nth-child() - Select a child element of a parent element. In order to to style every other row of a table you could write tr:nth-child(odd) or tr:nth-child(even).

:nth-last-child() - Select an element that has siblings after it in the DOM.

tr:nth-last-child(odd)

:nth-of-type() - Select an element that has siblings with the same expanded element name after it in the document tree.

body > h2:nth-of-type(n+2):nth-last-of-type(n+2)

The preceding code shows the selection of all h2 children of a body except the first and last.

:first-child - Select an element that is the first child of another element.

div > p:first-child

:last-child - Select an element that is the last child of another element.

ol > li:last-child

:first-of-type - Select an element that is the first sibling of its type in the list of children of its parent element.

dl dt:first-of-type

:last-of-type - Select an element that is the last sibling of its type in the list of children of its parent element.

tr > td:last-of-type

:only-child - Select an element that has a parent element and whose parent element has no other element children.

:only-of-type - Select an element that has a parent element and whose parent element has no other element children with the same expanded element name.

:empty  - Represents an element that has no children at all.

An example of :empty would be <p></p>

Dynamic pseudo-classes

:link and :visited  - Applies to links that have not yet been visited and have been visited, respectively.

:hover  - Applies to links or elements when a mouse or other input device “hovers” over a link or element.

:active  - Applied when a user clicks a link, but does has not released the click.

:focus – This can be used for when a control (input box) has focus.

Target pseudo-class

:target - The best way to explain this is with an example.

http://example.com/html/top.html#section_2

This URL has an anchor attached to it – #section_2. The #section_2 is referred to as a fragment identifier. You could add something like *:target { color : red } to apply the color red to the element that is referenced by the fragment identifier. And by using the * you are applying the color red to all anchors.

Language pseudo-class

:lang is used to denote the type of language a particular section of a page or entire page is written in. For example you could add html:lang(en) to let everyone know you page is written in English.

Element States pseudo-classes

:enabled and :disabled is used for controls like check boxes and radio buttons. It’s possible to have an enabled state and disabled state for each control on the page.

:checked is similar to :enabled and :disabled. For instance, if a radio button is selected or a check box checked the control is in the enabled state.

::first-line pseudo-element

The ::first-line pseudo-element describes the contents of the first formatted line of an element. For instance, p::first-line { color: red } would change the text color of the first line to red.

::first-letter pseudo-element

Similarly to ::first-line pseudo-element is the ::first-letter pseudo-element. For instance, p::first-letter { color: red } would change the text color of the first letter in the paragraph to red.

::before and ::after pseudo-elements

The ::before and ::after pseudo-elements specify the location of content before and after an element’s document tree content. For instance, the following rule p.note:before { content: “Note: ” } inserts the string “Note: ” before the content of every P element whose “class” attribute has the value “note”:

Class Selectors

Selecting an element with a particular class can be accomplished in a couple ways. div.value and div[class~=value] have the same meaning. However, the convention is to just use .value as it is much simpiler to write and remember.

With Class Selectors it’s also possible to link classes. If you want to apply several classes to a single element you could use the following syntax.

p.pastoral.marine { color: green }

This rule matches when class=”pastoral blue aqua marine” but does not match for class=”psatoral blue”.

 ID Selectors

It is quite possible to set attributes to a type ID. If you declare ID’s in your code you must be certain to declare ID’s unique. The following ID selector represents an h1 element whose ID-typed attribute has the value “chapter1″:

h1#chapter1

The negation pseudo-class

:not(X) is an element that is not represented by its argument. The following selector matches all button elements in an HTML document that are not disabled.

button:not([DISABLED])

Descendant combinator

While building your site you may want selectors to describe an element that is the descendant of another element in the document tree. For example, an em element that is contained within an H1 element.

h1 em

 Child Combinators

A child combinator describes a childhood relationship between two elements. The following selector represents a p element that is child of body:

body > p

Adjacent sibling combinator

The adjacent sibling combinator is made of the “plus sign” (+) character that separates two sequences of simple selectors. The following selector represents a p element immediately following a math element:

math + p

General sibling combinator

The general sibling combinator is made of the “tilde” ( ~ ) character that separates two sequences of simple selectors.

h1 ~ pre

Hopefully, this article has helped you better understand CSS selectors and how and where to use them in your code. This article was based on the W3C Selectors Level 3 recommendation, published on 29 September 2011.