CSS selectors

Derek Bridge

Department of Computer Science,
University College Cork

CSS selectors

Aims:

• to learn HTML's id and class attributes
• to review the syntax of CSS rules
• to review the hierarchical structure of HTML
• to learn CSS's find selectors
• to learn of CSS's filter selectors

Cascading Style Sheets (CSS)

h1 
{
    color: red; 
    background-color: blue;
}

• A CSS stylesheet contains:
  • one or more rules, and
  • comments (written between /* and */)
• A rule comprises:
  • one or more selectors
  • one or more declarations
• A declaration comprises:
  • a property and a value

Attaching a stylesheet to an HTML document

• We will use external stylehseets, i.e. the rules are in a separate file
• Suppose the rules are in a file called mystylesheet.css
• Within the head of the HTML document, include the following:

  <link rel="stylesheet" href="mystylesheet.css" />

  (There are lots of bells and whistles that we'll ignore.)
• There are two other ways to attach stylesheets rules to an HTML document:
  • embedded stylesheets: put the rules in the head of the HTML
  • inline styles: put the declarations into start tags in the HTML
  But these mix structure and presentation, so we'll ignore them

CSS selectors

• Three versions of CSS (CSS1, CSS2.1 and CSS3) with ever-increasing set of selectors
• Full description: W3C Selectors Level 3
• Summary table: Section 2 of W3C Selectors Level 3
• Support for all selectors: Firefox 3.5+, Safari 3.1+, Opera 9.64+, IE9+ and Chrome
• We'll split the selectors into
  • find selectors
  • filter selectors

Find selectors

• The universal selector selects all elements:

  * 
  {
      color: red;
  }

• A selector can be a tag:

  h1 
  {
      color : red;
  }

• We can have more than one selector, separated by commas:

  h1, h2, em 
  {
      color: red;
  }

HTML: the id attribute

• Some attributes only apply to certain tags (e.g. src with img)
• But all elements can have an id attribute
• You can invent its value, but it should be unique within the document
• Class exercise: What's it for? (Two purposes—so far)

Running example: mojitos.html

Find selectors: by id

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

  #ingredients
  {
      color: red;
  }

• You can also attach this kind of selector to *:

  *#ingredients 
  {
      color: red;
  }

  But this is redundant. Why?
• You can also attach to a tag:

  section#ingredients
  {
      color: blue;
  }

  Is this redundant in general?

HTML: the class attribute

• All elements can have a class attribute
• You can invent its value
• Several elements can share the same value
• Class exercise: What's it for? (One purpose)

Find selectors: by class

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

  .cocktail 
  {
      color: red;
  }
              

• You can also attach this kind of selector to *:

  *.cocktail 
  {
      color: red;
  }

  But this is redundant. Why?
• You can also attach to a tag:

  i.cocktail
  {
      color: red;
  }

  Is this redundant in general?

Find selectors: child and descendant

• To select 'a' elements that are children of lis:

  li > a 
  { 
      color: red;
  }

• To select 'a' elements that are descendants of nav elements:

  nav a 
  {
      color: red;
  }

Class exercise

• What do these select?

  nav li li 
  { 
      color: red; 
  }
  
  nav li#current 
  { 
      color: red; 
  }

• What's the difference between these two rules?

  section ol, ul
  {
      color: red;
  }
  
  section ol, section ul
  {
      color: red;
  }

• How would you select <h1>Ingredients</h1>?
• How would you select only the ingredient li's?

Observation

• Use child and descendant selectors to avoid the novice's disease of class-itis (and id-itis)
• E.g. even the ids in mojitos.html are probably unnecessary

Find selectors: summary

Filter selectors: by attribute

• E[A], to select an element E that has an attribute A

  img[alt]
  {
      border: 1px solid red;
  }

• E[A="V"], to select an element E that has an attribute A with a particular value V

  a[href="http://www.cs.ucc.ie/"]
  {
      background-color: yellow;
  }

• E[A*="S"], to select an element E that has an attribute A whose value contains a given substring S

  a[href*="amazon"]
  {
      background-color: yellow;
  }

• E[A^="S"], to select an element E that has an attribute A whose value starts with a particular substring S

  a[href^="http://"]
  {
      background-color: yellow;
  }

• E[A$="S"], to select an element E that has an attribute A whose value ends with a particular substring S

  img[src$=".jpg"]
  {
      border: 1px solid red;
  }

• …and a couple more

Filter selectors: by dynamic pseudo-class

• Hyperlinks
  • To select a hyperlink that has not yet been visited:

    a:link 
    {
        color: blue;
    }

  • To select a hyperlink to an already-visited address:

    a:visited 
    {
        color: red;
    }

• For any element
  • To select an element when the mouse is over it, e.g.:

    a:hover 
    {
        color: yellow;
    }
    
    tr:hover
    {
        background-color: #DFE7F2;
    }

Filter selectors: by structural pseudo-class

• To select an element that is the first or last child of its parent:

  li:first-child
  {
      color: blue;
  }
  
  li:last-child
  {
      color: yellow;
  }

• To select an element that is the n^th child of its parent (where the first child is child number 1):

  li:nth-child(3n+1)
  {
      color: red;
  }

• Ideal for zebra-striping a large table to aid readability:

  tr:nth-child(even)
  {
      background-color: #DFE7F2;
  }

And there are even more selectors

• Lots more pseudo-class filters (e.g. only-child, only-of-type, first-of-type, last-of-type,…)
• Then there also pseudo-elements to select first letter or first line, or to insert content before or after an element
• And there is also negation of a simple selector, e.g. section:not(#facts)