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:
- a { }
is a rule that applies to all <a> tags. - .blue { }
is a rule that applies to all elements of the class "blue". - a.blue { }
applies only to <a> tags that are class "blue". - a#ident { }
applies only to the <a> tag whose id is "ident". An id must be unique anyway.
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.
- element1 element2
The space expresses the contained state. Element 2 must be contained in the element 1. - element1 > element 2
The symbol ">" expresses a direct descendant. Element 2 must be contained in the element 1 directly and not in another contained in 1. - element1 + element2
The symbol "+" expresses the following. Element 2 should succeed directly to element 1.
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.
Syntax:
tag[attribute]or:
tag[attribute="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:
- element:link
a link when it has not been visited during the session. - element:visited
a link already visited. - element:active
a link if it matches the current page. - element:hover
when the mouse passes over the tag. - element:focus
when the tag has the focus.
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.
- element:: first-line
refers to the frontline of the content as displayed by the browser. - element:: first-letter
refers to the first character of textual content.
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
- element[name ^="string"]
Element that has the name attribute with a value that begins with the string "string". - element[name $="string"]
The value of the attribute "name" ends with "string". - element[name *="string"]
The value of the attribute "name" contains a substring "string". - element[attribute|= "string"]
Already in CSS 2.
Elements contained
- element: first-child
Already in CSS 2.
Designates an element of type "element" which is the first direct descendant in a container of some kind. If "element" for example is a <li> tag, li: first-child means the first <li> in the list. - element: last-child
Element of type "element" which is the last direct descendant of this type in any container. The last <li> in a list, for example. - element: nth-child (n)
N is a number corresponding to the nth descendant of the type "element" in a container of some kind. - element: nth-last-child (n)
Starting from the last.
Elements contained with the same type
- element: first-of-type
First descendant of type "element" among the descendants of the parent container. - element: last-of-type
Last descendant of the same type as "element" in the same container. - element: nth-of-type (n)
N is a number corresponding to the nth descendant of the type "element" in the parent. - element: nth-last-of-type (n)
Starting from the last.
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
- element: empty
Element without child. For example:<p></p>.
Selection by the state
This completes the tag states of CSS 2.
- element: enabled
defines a style for "element" when it is active only. - element: disabled
define a style to "element" when it is disabled. - element.checked
define a to " element" when it is checked.
Further selection
- element: not(s)
Applies to elements that are different from the selector s, and then applies the style when the style of s does not apply, at least from the definition provided in s.
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.