Collected by
Elizabeth Janson
Home Page

External Selectors

External Selectors
- Pseudo-Classes
  - :first-child pseudo-class
  - The link pseudo-classes- :link and :visited
  - The dynamic pseudo-classes- :hover, :active, and :focus
  - The language pseudo-class- :lang
- Pseudo-Elements
  The :first-line pseudo-element
  The :first-letter pseudo-element
  The :before and :after pseudo-elements

CSS pseudo-classes and pseudo-elements are used to work with certain aspects of a page's formatting that can't be accessed using plain old HTML tags. For example, there isn't a tag to indicate a page has been visited, and there are no tags to indicated the first letter or first line of a block of text. This is where the new keywords come in handy.

For more details, see Using Link Tags and Over and underlines.

The pre-defined classes for the <a> tag have a colon : as part of the selector

A:link { color: blue } Attributes related to the unvisited links,
A:visited { color: purple } related to your visited links.
A:active { color: red } related to your active links.

and are written in the BODY tag -
<BODY BGCOLOR=white TEXT=black LINK=blue VLINK=purple ALINK=red>

This page has these BODY tags placed in the Style Sheet.

<STYLE TYPE="text/css">
<--
A:link    { background: transparent; color: #006600; 
	  font-weight : bold;
          text-decoration: underline; }/* dark-green link*/
A:visited { background: transparent; color: #8B4513; 
	  font-weight : bold;
          text-decoration: none; }/* saddlebrown visited*/
A:hover   { background: transparent; color: #FF4500; 
	  font-weight : bold;
          text-decoration: underline; }/*orangered hover*/
BODY      { background: ivory }
TD.topl   { background: #8FBC8F }
TD.topr   { background: moccasin }
-->
</STYLE>

You can see I have broken the 'rules'. Another author suggests links should be bright and underlined when unused, perhaps a different background when hovered over (to show co-operation?), and a dull version once they have been visited.
It is up to you, but I do like to find clearly obvious links when I visit your site.

My code gives Link Tags, Over and underlines, :first-letter and :first-line

Pseudo classes

These have names beginning with one colon (:).
1 Structural pseudo-class

The :first-child pseudo-class matches an element that is the first child of some other element.

OL

{color: blue}
:first-child {color: red} - matches any element that is a first-child, as does


*:first-child

. For example, in:

<OL>
<LI>
This is the first child of OL - it is matched by LI:first-child.
<LI>
This is the second child of OL.
</OL>

This is the first child of OL - it is matched by LI:first-child.
This is the second child of OL.

2 The link pseudo-classes are :link and :visited
User agents commonly display unvisited links differently from previously visited ones. CSS provides the pseudo-classes ':link' and ':visited' to distinguish them. The two states are mutually exclusive.

3 The dynamic pseudo-classes: :hover, :active, and :focus
Interactive user agents sometimes change the rendering in response to user actions. These pseudo-classes are not mutually exclusive. An element may match several of them at the same time.

4 The language pseudo-class is :lang
If the document language specifies how the human language of an element is determined, it is possible to write selectors in CSS that match an element based on its language.

5 User Interface pseudo-class
Examples are :enabled and :disabled :checked and :indeterminate.
Radio and checkbox elements can be toggled by the user. Some menu items are "checked" when the user selects them. When such elements are toggled "on" the :checked pseudo-class applies. Radio and checkbox elements can be toggled by the user, but are sometimes in an indeterminate state, neither checked nor unchecked. Components of a radio-group initialized with no pre-selected choice are an example of :indeterminate state.

Anchors A:link, A:visited, A:active, A:hover and A:focus

These pseudo classes should be familiar to you, possibly with the exception of the :hover class. Always list them in the order

A:link    { color: red }    /* unvisited links */
A:visited { color: blue }   /* visited links   */
A:active  { color: lime }   /* active links    */
A:hover   { color: yellow } /* user hovers     */

since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, if A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.

In other words, if you want to use A:hover, make sure always to use A:link first.
Otherwise, IE will ignore your A:hover rule.

An example of combining dynamic pseudo-classes: 
    A:focus { background: yellow }
    A:focus:hover { background: white }

The last selector matches A elements that are in pseudo-class :focus and in pseudo-class :hover.

A pseudo-class anchor identifier (called the fragment identifier) will include the target part of an URL, using # which refers to a location within a resource. This kind of URL ends with "#" followed by an identifying name.

Note. In CSS1, the ':active' pseudo-class was mutually exclusive with ':link' and ':visited'. That is no longer the case. An element can be both ':visited' and ':active' (or ':link' and ':active') and the normal cascading rules determine which properties apply.

The title attribute may be set for both A and LINK to add information about the nature of a link. This information may be spoken by a user agent, rendered as a tool tip, cause a change in cursor image, etc.

These links have tooltips, and refer to my other sites.
Code example: <A HREF="/Mallee2001" title='Our Anglican Parish of Northern Mallee was formed by the combination of four former parishes'>Parish</A>.
SEE - No gaps in the end of the TITLE '>Parish.
Parish
Note - we can also add a status bar message
John <A HREF="/mepnab/aker/morris.html" OnMouseOver="window.status='John wed Harriet Kerrison'; return true;" title='John wed Harriet and lived in Tasmania where 12 children were born'>Morris</A>,
John Morris,

You can change much more than color with A:hover. Here are some ideas (mouse over them to see the action) - coded
<A HREF="http://www.tsdesign.com/mulder/" CLASS="test1">Hover</A>

Notice how the layout of the entire page changes on the fly to accommodate that text-size change. It's quite impressive, though a bit disconcerting for the user, so be sure to use these toys wisely.

Here is the code

<STYLE TYPE="text/css">
<!--

A:link.test1 { color: blue }
A:hover.test1 { color: red }

A:link.test2 { color: blue }
A:hover.test2 { font-size: 24px }

A:link.test3 { color: blue }
A:hover.test3 { font-weight: bold; font-style: italic }

A:link.test4 { color: blue }
A:hover.test4 { background: #66ff33 }

A:link.test5 { color: blue }
A:hover.test5 { font-family: Courier, "Courier New" }

A:link.test6 { color: blue; text-decoration: none }
A:visited.test6 { text-decoration: none }
A:hover.test6 { text-decoration: underline }

A:link.test7 { color: blue }
A:hover.test7 { color: red; font-weight: bold; 
	background: #CCFF66 }

-->
</STYLE>

Email
CSS begins here

Back to DIV and SPAN selectors or on to pseudo elements

This page is part of Elizabeth Janson's web site

http://www.oocities.org/elizatk/index.html

My other sites are the Anglican Parish of Northern Mallee,
Tetbury residents in the Eighteenth Century
my Australian Family History and Barrie, our Family Poet.