Selectors (class, ID, universal, etc.)

Grouping – When several selectors have same rule to apply, they may be grouped into a comma-separated list. In this example, we condense three rules into one. Thus,

h1 { font-family: sans-serif }

h2 { font-family: sans-serif }

h3 { font-family: sans-serif }

is equivalent to:            h1, h2, h3 { font-family: sans-serif }

Universal selector – It is written as “*”, matches the name of any element type. It matches any single element in the document tree. For example: *[lang=fr]  matches elements with attribute “lang=fr”.

Type selectors – It matches every instance of the element type in the document tree. The following rule matches all H1 elements in the document tree:  h1 { font-family: sans-serif }

Descendant selectors – It matches to the descendant of an element in the web page. It is of the form “A B” matches when an element B is an arbitrary descendant of some ancestor element A. As in example, consider the following rules:

h1 { color: red }

em { color: red }

Although the intention of these rules is to add emphasis to text by changing its color, the effect will be lost in a case such as:

<H1>This headline is <EM>very</EM> important</H1>

We address this case by supplementing the previous rules with a rule that sets the text color to blue whenever an EM occurs anywhere within an H1:

h1 { color: red }

em { color: red }

h1 em { color: blue }

The third rule will match the EM in the following fragment:

<H1>This <SPAN class=”myclass”>headline

is          <EM>very</EM> important</SPAN></H1>

Child selectors – It matches when an element is the child of some element. A child selector is made up of two or more selectors separated by “>”. The following rule sets the style of all P elements that are children of BODY:

body > P { line-height: 1.3 }

The following example combines descendant selectors and child selectors:

div ol>li p

It matches a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant of a DIV. Notice that the optional white space around the “>” combinator has been left out. For information on selecting the first child of an element, please see the section on the :first-child pseudo-class below.

Adjacent sibling selectors – They have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments).

Thus, the following rule states that when a P element immediately follows a MATH element, it should not be indented:

math + p { text-indent: 0 }

The next example reduces vertical space separating an H1 and an H2 that immediately follows it:

h1 + h2 { margin-top: -5mm }

The following rule is similar to the one in the previous example, except that it adds a class selector. Thus, special formatting only occurs when H1 has class=”opener”:

h1.opener + h2 { margin-top: -5mm }

Class selectors – The period (.) notation is used for representing the class attribute for applying styles to all elements having the same class value. The attribute value must immediately follow the “period” (.). For example, we can assign style information to all elements with class~=”pastoral” as follows:

.pastoral { color: green }

Given these rules, the first H1 instance below would not have green text, while the second would:

<H1>Not green</H1>

<H1 class=”pastoral”>Very green</H1>

To match a subset of “class” values, each value must be preceded by a “.”.

ID selectors – No two ID attributes can have the same value; and it uniquely identify an element. The ID attribute assigns an identifier to one element. A CSS ID selector contains a “#” immediately followed by the ID value, which must be an identifier. The following ID selector matches the H1 element whose ID attribute has the value “chapter1”:

h1#chapter1 { text-align: center }

ID selectors have a higher specificity than attribute selectors.

Back to Tutorial