Selectors

Selectors are the mechanism that allows nodes in an HTML Document Object Model (DOM) to be selected. The selected element can then be used in a variety of ways, in hyperlinks, CSS or Javascript. Selectors rely on the HTML DOM being a hierarchical tree data structure, with nodes having children, siblings, parents and ancesstor. This hierarchical property is used to provide for selection of different parts of the DOM.

Selectors are the mechanism for binding together HTML, CSS and Javascript. All the more reason for Keeping content, presentation and events seperate.

Let's clarify the idea with an example, consider the following snippet of HTML code.

⋮
<body>
	<article id="selectors">
		<header>
			<p class="highlight">
				TODO: page header
			</p>
		</header>
		<section id="type_selector">
			<p class="highlight">
				TODO: explain <strong>type</strong> selectors.
			</p>
		</section>
		<section id="class_selector">
			<p class="highlight">
				TODO: explain <strong>class</strong> selectors.
			</p>
		</section>
		<section id="id_selector">
			<p class="highlight">
				TODO: explain <strong>id</strong> selectors.
			</p>
		</section>
		<section id="psuedo_selector">
			<p class="highlight">
				TODO: explain <strong>psuedo</strong> selectors.
			</p>
		</section>
		<section id="combine_selector">
			<p class="highlight">
				TODO: explain selector <strong>combination</strong> based on the DOM relationship.
			</p>
		</section>
		<footer>
			<p>
				TODO: Page footer
			</p>
		</footer>
	</article>
</body>
⋮
  • For brevity we have not included the doctype, html and head elements in the code snippet; you need to include them before trying this example. The code snippet specifies a header, several sections and a footer.
  • Note the use of the id attribute on various elements. For example, the section id="combine_selector" element can be uniquely selected as it's id has a uniques value, combine_selector. This is known as an id selector. This unique value, combine_selector can be used as an address in a hyperlink, or a selctor for CSS styling or applying Javascript behaviour.
  • Note the use of the class attribute. Unlike an id, a class can be applied to many occurances of a particular element. We say the element belongs to that class. This is know as a class selector. For example, the class highlight has been used several times and a selector would select all of the elements with a class value, highlight allowing for a common set of CSS rules to be applied to the whole selection of elements.
  • A third way of selection is simply the element type; article, header, h1, nav and so on. Any HTML element can be a type selector. This is global as any CSS applied to a particular element would be applied to all occurances of that element. This is known as a type selector.
  • Selectors can also be combined, for example
    • footer > h1 selects only the h1 element that is the child of the footer element.
    • section.highlight > h1 selects only the h1 element that is the child of the section element that are of class type highlight.
    • footer h1 selects only the h1 elements that are descendant of the footer element (N.B. a child, or a child of a child, etc. Use with care; depending on the level of nesting, this can be very inefficent).
  • Selectors can be specified as a comma seperated list to have the same CSS rule, for example: div, h1 { color: red; } (this selects all div and h1 elements, whereas div h1 { color: red; } (without the comma) selects only the h1 within a div element.)

With the id, class, type and pseudo selectors in mind, let's use them to specify CSS rules.

CSS

Let's remind ourselves of the terminology. Style sheets are a set of style rules. A rule starts with a selector (an HTML node or a group of HTML nodes) and applies a particular declaration. Declarations are predefined properties, such as width or color, and their corresponding values.

CSS rule

  • Note the syntax, declarations are grouped together in curly braces, { … }.
  • Each declaration is seperated by a semi-colon character.
  • Declaration are predefined properties and their corresponding values seperated by a colon character.

Whilst CSS syntax is deceptively simple, complex designs are suprisingly difficult to implement. Central for writting efficient CSS is the effiecient use of selectors. This is the basic mechanism that allows nodes in the HTML Document Object Model (DOM) to be selected before a style declration can be applied to it. An HTML DOM is a hierarchical tree data structure, with nodes having children, siblings, parents and ancesstor. Selectors use this hierarchical property to provide for selection of different parts of the DOM. Let's clarify the idea with an example, consider the following snippet of HTML code:

section {
	 border-top: 1px solid gray;
}
footer {
	 color: gray;
	 border-top: 1px solid gray;
}
footer > h1 {
	color: gray;
}
.highlight {
	 color: #660000;
	 background-color: #DDD;
	 font-size: 12px;
	 padding: 1em;
}
.highlight:hover{
	background-color: gray;
}
#selectors {
	 padding: 1em;
	 border: 1px solid gray;
	 border-radius: 10px;
}

Consider the CSS and HTML code above and note the following:

CSS and Selectors

  • The # symbol in CSS matches an id attribute in HTML. Therefore, the CSS id selector, #selectors matches the id="selectors" HTML element.
  • The . symbol in CSS matches a class in HTML. Therefore, the CSS class selctor.highlight matches any HTML element with the attribute class="highlight".
  • HTML Element names are refered to as type selectors and they match all occurances of the particular element. section and footer are examples of type selctors.
  • Pseudo selectors can be used with type, id or class selectors; .highlight:hover is an example of a pseudo-class selector.

CSS properties

  • There is a bewildering array of CSS properties and worse it is often a combination of properties that is needed to achieve a particular effect, for example, border together with border-radius. Don't be too concerned, concentrate on the concepts, you will become increasingly familiar with CSS properties as we explore further examples.

CSS units

  • Length can be specified as an absolute measure, 12px (pixcels) or a relative measure such as 2em (2 times the size of the current base font).
  • Colour can be defined by it's name, hexidecimal or RGB value; take a brief look at this article .
CSS Shorthand properties.
  • Shorthand notation can apply to properties as well as values, for example:
    • padding: 1em; is equivalent to: padding-top: 1em; padding-right: 1em; padding-bottom: 1em; padding-left: 1em;
    • padding: 1em 2em 3em 4em; is equivalent to: padding-top: 1em; padding-right: 2em; padding-bottom: 3em; padding-left: 4em; (start at the top and moves in a clockwise direction)
    • border: 1px solid gray; is equivalent to: border-width: 1px; border-style: solid; border-color: gray;

CSS specifity

  • Consider the following HTML:
    <p class="highlight" id="intro">Example paragraph</p>
    and the following CSS:
    p {
    	color: red;
    }
    .highlight {
    	color: green;
    }
    #intro{
    	color: blue;
    }
    
    What is the resulting paragraph colour? The answer is blue, not because it is the last declaration but because id selectors take precedence over class selectors which in turn have precedence over type selectors.

If you are new to CSS, there is much material covered in this tutorial; you should spend a little time absorbing the content and testing yourself with the following exercise.

CSS exercise ‐ Selectors

  1. Create files named, selectors.html and selectors.css
  2. Copy and paste the HTML code above and save the selectors.html file. Complete the file by including the missing doctype, html and header elements. In the head element, include a link element and specify selectors.css as it's src attribute value.
  3. Validate the selectors.html document.
  4. Open the selectors.html file in a web browser (not Internet explorer, use Firefox), you should see the TODO: messages in the default browser style.
  5. Copy and paste the CSS code above into selectors.css file and save.
  6. Validate the selectors.css file.
  7. Open the selectors.html file in a web browser (not Internet explorer, use Firefox), you should see the style rules being applied.
  8. Right mouse click on any element and select Inspect Element. The Web developer window should open with panels displaying the HTML DOM, CSS code and the browser display. Notice, in the developer panels, you can:
    • select an HTML element and the CSS panel updates with the CSS applied to the element; the browser display is also highlighted for that element.
    • select and deselct CSS declation.
    • define new properties and click on a property value and change it (this is not saved to disk)
    • experiment a little by changing the border radius, border width and colour values. Change the font size and padding values.
  9. Replace the TODO: in the section elements with the requested explanation, making sure you are using semantically correct HTML elements.
  10. Validate the selectors.html and selectors.css documents and display it in Firefox.