CSS Selectors

CSS (Cascading Style Sheets) is a language for describing the rendering of HTML documents on screen, on paper, in speech, etc. CSS uses Selectors for binding style properties to elements in the document.

Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in a HTML document. Selectors have been optimized for use with HTML and XML, and are designed to be usable in performance-critical code.

The selectors that already exist in CSS1 and CSS2, and new selectors for CSS3 and other languages that may need them are described in https://www.w3.org/TR/css3-selectors/.

Class selectors: The house

There is a house depicted below which consists of following parts: (tip: hover the words in order to get those highlighted in the image on the right hand side)

The nesting in the list of identified parts of the house idicates the nesting of CSS classes applied to elements representing those.

Class attribute

Class is a HTML attribute which can be associated with any HTML element. Or, when put the other way round, any HTML element can have a class attribute.

There can be a single element with some specific class, or many elements with the same class. The class is not a unique identifier, as it can be shared with many, possibly different, elements.

Simple class selector

Working with HTML, authors may use the "period" notation (also known as "full stop", U+002E, .) when representing the class attribute. The class attribute value must immediately follow the full stop (.).

More details on the class selector can be found onhttps://www.w3.org/TR/css3-selectors/#class-html

Let's explore The House using CSS Selectors

All the parts of our house identified in the list above, are assigned a matching class. Thus, in order to explore (select) window or door, typing .window or .door should do it.

Keep in mind, that, a class is a non-unique attribute, and thus many different elements may share such class. Let's take, for example, .window. Such selector would select all windows in our house. The one in roof, door and even the big one. Try it yourself!

Exercise 1

Using the textfield below, select all following parts of the house:

Chaining selectors - sequences of simple selectors

A sequence of simple selectors is a chain of simple selectors, for instance class selectors discussed above, that are not separated by a combinator. Combinators will be discussed in following chapter.

Let's start with an example for a better idea of such chain or sequence of simple selectors. You might have noticed, that not all the windows in our house are the same. Not only some are place inside the roof, some are inside the door, and some windows are typical windows in a wall, but some are also round, and some are square.

This shape related information is, along the type information, is stored inside a class selector as well. For the tution purposes, it's simplified to round and square class names. In order to select all square windows, such a chain or sequence of simple selectors would look the following way: .window.square. Let's give it a try!

Exercise 2: chaining simple selectors

Select all following elements of given shape:

Combining selectors

CSS Selectors can be combined using following list of combinators:

Descendant combinator

You may want selectors to describe an element that is the descendant of another element (e.g., "a window element that is contained within a door element"). Descendant combinators express such a relationship. A descendant combinator is whitespace that separates two selectors. Thus, selecting a window inside a door, could be done using following notation: .door .window, where the spance in between .door and .window is the descendant combinator, represented by whitespace.

Let's give it a try. Let's select a window in door, and window in roof, or more precisely window in dormer.

Exercise 3: Descendant combinator

Child Combinator

A child combinator describes a childhood relationship between two elements. A child combinator is made of the "greater-than sign" (U+003E, >) character and separates either two siple selectors, or two sequences of simple selectors, or a simple selector and a sequence of simple selectors.

The child-parent relationship in terms of HTML and CSS can be explained by an example on our house. Let's have a look on the two square windows. One is directly inside the wall, the second one, is inside the door. Both can be selected by .wall .window. Give it a try:

But, when we are talking about child-parent relationship, the big window inside the wall, is a child of the wall. The other one, is directly inside the door. Thus, it is a child of door. But not a child of the wall, as there is another element in between those two - the door.

We could say, that the window inside the door is a grandchild of the wall. But CSS does not take grandchild relationship into account. All relationships beyond the parent-child relationship belong to the category of descendants, and we would need to use the descendant combinator, as it was discussed in the previous chapter.

Exercise 4: Child combinator

Let's explore the parent-child relationships in our house. Select following elements starting off the .wall:

The Colouring part

All you have learned about CSS selectors so far should be enough to turn the black&white house into a nicely coloured one.

You'll find a colourbox and an input field for your selectors below. Pick a colour, write a selector, and colour the house!