Web Development

Dr Derek Bridge
School of Computer Science & Information Technology
University College Cork

Lecture Objectives

  • learn CSS's find selectors
  • learn how to use HTML's id and class attributes in CSS

CSS Terminology

  • A rule comprises:
    • one or more selectors and
    • a block of zero, one or more declarations in curly braces
  • A declaration comprises:
    • a property and
    • its value, separated by a colon
    and is usually terminated by a semi-colon. 

p {
    color: red;
}

header {
    color: white;
    background-color: black;
}

Two Kinds of CSS Selector

We'll split the selectors into:

  • find selectors (which we cover in detail);
  • filter selectors (which we will mention briefly).

Find Selectors

*Matches all elements
EMatches all elements with tag name E
#IMatches the element with id of I
.CMatches all elements with class of C
E > FMatches all F elements that are children of E elements
E FMatches all F elements that are descendants of E elements
E + FMatches all F elements that are immediately preceded by sibling E
E ~ FMatches all F elements preceded by sibling E

Find Selectors

*Matches all elements
EMatches all elements with tag name E
#IMatches the element with id of I
.CMatches all elements with class of C
E > FMatches all F elements that are children of E elements
E FMatches all F elements that are descendants of E elements
E + FMatches all F elements that are immediately preceded by sibling E
E ~ FMatches all F elements preceded by sibling E

A Snippet of HTML

This will be our running example: 


<p>
    The next few sections tell you all about me.
</p>
<section id="bio">
    <h2>Biography</h2>
    <p>
        I was inspired to take up <i>Taekwondo</i> after
        playing the video game <i class="game">Tekken 3</i>.
    </p>
    <p>
        But playing Grand Theft Auto 
        discouraged me from a life of car-jacking.
    </p>
</section>

The Universal Selector

The universal selector * selects all elements: 


* {
    color: red;
}

Find Selectors

*Matches all elements
EMatches all elements with tag name E
#IMatches the element with id of I
.CMatches all elements with class of C
E > FMatches all F elements that are children of E elements
E FMatches all F elements that are descendants of E elements
E + FMatches all F elements that are immediately preceded by sibling E
E ~ FMatches all F elements preceded by sibling E

Type Selectors

A selector can be a tag: 


p {
    color : red;
}

Find Selectors

*Matches all elements
EMatches all elements with tag name E
#IMatches the element with id of I
.CMatches all elements with class of C
E > FMatches all F elements that are children of E elements
E FMatches all F elements that are descendants of E elements
E + FMatches all F elements that are immediately preceded by sibling E
E ~ FMatches all F elements preceded by sibling E

Revision: The id Attribute

  • Some attributes only apply to certain elements (e.g. src with img).
  • Others, like id, are global, i.e. they apply to all elements (e.g. lang).
  • You can invent the id attribute's value, but it should be unique within the document, e.g.: 
    
<section id="bio">

Id Selectors

In CSS, you can use # to select by id: 


#bio {
    color: red;
}

Find Selectors

*Matches all elements
EMatches all elements with tag name E
#IMatches the element with id of I
.CMatches all elements with class of C
E > FMatches all F elements that are children of E elements
E FMatches all F elements that are descendants of E elements
E + FMatches all F elements that are immediately preceded by sibling E
E ~ FMatches all F elements preceded by sibling E

The class Attribute

  • In HTML, class is another global attribute.
  • You can invent its value. Several elements can share the same value, e.g.: 
    
<i class="game">Tekken 3</i>

Class Selectors

In CSS, you can use . to select by class: 


.game {
    color: red;
}

Find Selectors

*Matches all elements
EMatches all elements with tag name E
#IMatches the element with id of I
.CMatches all elements with class of C
E > FMatches all F elements that are children of E elements
E FMatches all F elements that are descendants of E elements
E + FMatches all F elements that are immediately preceded by sibling E
E ~ FMatches all F elements preceded by sibling E

Hierarchichal Structure

Child Selectors

Based on a parent
E.g. to select p elements that are children of section elements: 


section > p { 
    color: red;
}

Descendant Selectors

Based on an ancestor
E.g. to select i elements that are descendants of section elements: 


section i {
    color: red;
}

Find Selectors

*Matches all elements
EMatches all elements with tag name E
#IMatches the element with id of I
.CMatches all elements with class of C
E > FMatches all F elements that are children of E elements
E FMatches all F elements that are descendants of E elements
E + FMatches all F elements that are immediately preceded by sibling E
E ~ FMatches all F elements preceded by sibling E

Sibling Selectors

Based on an immediately preceding sibling
E.g. to select a p whose immediately preceding sibling is an h2: 


h2 + p {
    color: red;
}

Sibling Selectors

Based on any preceding sibling
E.g. to select a p any of whose preceding siblings is an h2: 


h2 ~ p {
    color: red;
}

Rules with Several Selectors

We can have more than one selector, separated by commas.

E.g. these mean the same:

Filter Selectors

  • There are three ways to combine a find selector with a filter.
  • Attribute selectors — in square brackets, e.g.
    • E[foo] finds E elements that have an attribute foo.
  • Pseudo-classes — after a colon, e.g.
    • E:first-child finds E elements that are the first child of their parent.
    • E:hover finds E elements, but only when the user hovers over them with the mouse.
  • Pseudo-elements — after two colons, e.g.
    • E::first-letter finds the first letter of E elements.
  • See here: https://www.w3.org/TR/selectors/

Exercise


<ul>
    <li id="pastry">For the pastry:
        <ul>
            <li class="ingredient">flour</li>
            <li class="ingredient">butter</li>    
        </ul>
    </li>
    <li id="filling">For the filling:
        <ul>
            <li class="ingredient">stewing beef</li>
            <li class="ingredient">an onion</li>
            <li class="ingredient">Guiness</li>
        </ul>
        Optionally, include <b class="ingredient">carrots</b>.
    </li>
</ul>

Child and Descendant Selectors

  • What do these select? 
    
li li { 
    color: red; 
}
    
li > li { 
    color: red; 
}
  • How would you select only pastry ingredients?

Sibling Selectors

What do these select?

  • .ingredient + .ingredient
  • .ingredient ~ .ingredient

Filters

What do these select?

  • .ingredient:first-child
  • .ingredient:first-child + .ingredient

G'luck!