CSS 2 and CSS 3 selectors

The rules of style sheets are composed of a selector that identifies the HTML element and a definition made of a list of properties related to this HTML element or class of items.

A selector may be a simple selector or a compound, or a chain of simple selectors or compounds separated by combinators. These are the signs > or + or white space.

The simple selector

This may be the name of a tag, that of a class preceded by a point, that of an identifier preceded by the # sign.

Example of HTML code:

<div id="identifier" class="box">

The associated style sheet:

div { background:white; }

All layers will have a white background.

#identifier { color:red; }

The unnique layer whose the identifier is "identifier" will have a text in red. The others will have the default text color of the container or the page.

.box { border: 1px solid gray; }

All layers belonging to the class "box" will have an edge of one pixel and gray thick. As all other HTML elements to which we associate this class.

In conclusion, selectors can associate a style to a single element, a tag or different tags but with the same class.

The universal selector

The symbol * represents any element: all classes, id, or markers.

The rule:

* { color:blue; }

applies to <p>, <h1> and all other tags, and any named element.

Aggregation rule

If you have two rules whose body is the same, but defining different selectors, for example:

h2 { color: blue; }
h3 { color: blue; }  

They can be grouped into one, by separating the selectors with a comma:

h2, h3 { color: blue; }

Subsets rules

We can define a rule for a tag type for a class or a single object but also more specifically, to a class assigned to a type of tag.

To recap:

For exemple, to designate such element:

<a class="blue" href="" >Link</a> 

we use the third rule.

Combination rules

The combinations are used to select element relative to another element, in various ways.

CSS 3 adds element1 ~ element2. The symbol "~" indicates indirect succession. Element 2 succeeds element 1, but there may be other intermediate containers.

Attribute selector

For tags like <input> that correspond to different objects based on the type attribute, it is possible to select tags based on the attribute and retain those who have a particular attribute or that attribute with a given Value.





For example:

input [type="button"]

This associates a style to all buttons but not all the input tags.

The selector element[attribute|="string"] retains all tags/classes with the attribute "attribute", for value a list of words separated by a space containing the word "string".

Selectors states

For tags like <a> that have several states depending on the browser, not HTML, the separator ":" allows to limit to a specific state.

Element being is the tag or the class assigned to a link or a set of links:

CSS has included three new states that we will see later. In addition, these statements may also apply tags other then <a>.

Selectors of parts

The symbol ":" defines more specifically a portion within the contents of a tag.

Plus others of less interest.

New CSS 3 selectors

The terminology has changed a little with the new specification. The word simple means a component of a sequence of selectors, in CSS 2 this means that sequence.
The combinator tilda appeared.

Attributes and regular expressions

Elements contained

Elements contained with the same type

Difference between first-child and first-of-type

In the first case, the first descendant of the parent must have the type of "element", it is the case of a list where all elements are of type <li>.
In the second case the parent may have descendants of different types, and is the first that has the type "element" that is concerned.

Difference between nth-child() and nth-of-type()

As above, but it is the nth element that is concerned.
In the first case the parent has n elements of type "element".
In the second parent contains n elements of different type and the nth-type "element" is considered.

Other criteria for containers

Selection by the state

This completes the tag states of CSS 2.

Further selection

Some other selectors whose interest appears marginal and practical implementation uncertain have been omitted.

All the selectors are insensitive to the case, but with the limitation that the identifiers may include uppercase in XHTML, not HTML.

W3C specifications

© 2010-2012 Xul.fr