MMDT1021 Chapter 9 Notes - page 2

 

Selecting Link Elements Based on Their State

This is a very popular method of giving links a rollover effect.
Code Page
Here is a page with a black background with various links.  The links have a red rollover effect. Result
Source
It is extremely important maintain the following order when specifying multiple link elements:
  1. link
  2. visited
  3. focus
  4. hover
  5. active

Selecting Part of an Element

This is only supported by the latest browsers (Netscape 6, IE 6, and above).  This method of selecting an element is not widely used, so we will not discuss this here.

Selecting Elements Based on Attributes

This is not supported by Internet Explorer.  This method of selecting an element is not widely used, so we will not discuss this here.

Selecting Groups of Elements

This is widely used to apply the same style to a group of elements.  It is simply a shortcut to doing a style for each element individually.
Code Page
Here is a page where <h3>, <i>, and <b> tags have all been given a green font color with a yellow background.  So the rule is when elements are separated by "," commas, the operation is an "or".  Example below, if h3 or i or b, then apply the style.

h3, i, b{color:blue; background:yellow;}

 Result
Source

Combining Selectors

Code Page
This was already done in a previous example.  Here it is again.
Bolded words <b> are given special effects only if they are contained within the class "demo1" <div class="demo1">.  So the rule is when elements are separated by only spaces (no commas present), the operation is an "and".  Example below, if class demo1 and b, then apply the style.

div.demo1 b {color:blue; background:yellow;}

 Result
Source