Selectors

In the previous section, we saw some examples of type selectors. Here, we introduce other kinds of selector. This is not an exhaustive review, but should give you some idea of what is possible.

Selecting Multiple Types

If you want a rule to apply to a set of different elements, use a comma-separated list of those elements as your selector. For example, to apply a rule to both level 1 and level 2 headings, you can do

h1, h2 { ... }

ID & Class Selectors

An element can be given a unique ID in an HTML document using the id attribute, e.g.,

<span id="name">John Smith</span>

The selector for such an element uses the value of the id attribute, preceded by a hash:

#name { ... }

This rule will apply to that one element only, and no others.

Whereas IDs are unique within a single document, classes can be applied multiple times. Consider the earlier example of recipe ingredients:

<p>To make your own pesto, you will need
  <span class="ingredient">basil</span>,
  <span class="ingredient">pine nuts</span>,
  <span class="ingredient">garlic</span> and some good
  <span class="ingredient">olive oil</span>.</p>

To target a particular class, we use the value of the class attribute preceded by a period:

.ingredient { ... }

Note that type and class selectors can be easily combined. For example, the rule

span.ingredient { ... }

would target span elements in the ingredient class but would NOT affect other elements that also belonged to this class.

Pseudo-Classes and Pseudo-Elements

CSS pseudo-classes are classes that automatically apply to elements that are in particular states. For example, the :hover pseudo-class will apply to an element when the cursor is hovering over it. We can write a CSS rule that targets this pseudo-class in order to change the appearance of an element when a user is about to interact with it:

CSS can also target pseudo-elements. These are not real HTML elements, but they allow styling of particular parts of real elements. For example, the ::first-letter and ::first-line pseudo-elements represent the first letter and first line, respectively, of a paragraph of text. Using these in a selector allows us to style the first letter or line differently from the rest of a paragraph.

Contextual Selectors

Descendant

The simplest descendant selector consists of a type selector for a parent element, then a space, then a type selector for a child element. For example, we could have

ul a {
  color: green;
  text-decoration: none;
}

This would target all hyperlinks that occur within unordered lists, colouring them green and ensuring that they are not underlined.

Child

A child selector is similar to a descendant selector but is more restrictive, as it targets direct descendants. For this, we need to use the ‘has child’ combinator, >.

For example, suppose we have this HTML:

<h2><a href="index.html">Foobar Ltd</a></h2>
<p>
  <strong><a href="shop.html">Visit our shop</a></strong>
    or <a href="feedback.html">send us feedback</a>.
</p>

Now suppose that we style the HTML with this rule:

p > a {
  color: green;
  text-decoration: none;
}

This will match only one of the three hyperlinks, because only one of them has the a element occurring directly within a p element.

Adjacent Sibling

The + combinator can be used to create selectors that target adjacent siblings in the element hierarchy of an HTML document.

Consider these two CSS rules:

p {
  font-weight: bold;
}

p + p {
  font-size: small;
  font-weight: normal;
  color: purple;
}

The p selector will select all paragraphs.

The p + p selector will select any paragraph that is immediately preceded by a paragraph. If you have a sequence of paragraphs, with no intervening elements, it will override the p rule for all paragraphs except the first.

Task 2.2

Go to the MDN Playground. Enter the HTML and CSS from the child selector example above, to satisfy yourself that it behaves as described.
Remove the ‘has child’ combinator (the > symbol) from the CSS rule and observe what happens.
Clear the content from the Playground and create three p elements in the HTML input area, containing text of your choosing.
Add the first of the two CSS rules from the adjacent sibling example above, and observe what happens. Then add the second of the two rules.
Finally, try inserting a heading element in between the second and third paragraphs.

Web-Based Systems