Home arrow DHTML arrow Page 4 - Style Sheet Property Reference
DHTML

Style Sheet Property Reference


If you're looking for a thorough resource on style sheet properties, you've come to the right place. This article, the first part of a series, covers colors, selectors, and more. It is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Copyright © 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 5 stars5 stars5 stars5 stars5 stars / 9
August 30, 2007
TABLE OF CONTENTS:
  1. · Style Sheet Property Reference
  2. · Colors
  3. · Pseudo-Element and Pseudo-Class Selectors
  4. · Pseudo-Classes

print this article
SEARCH DEVARTICLES

Style Sheet Property Reference - Pseudo-Classes
(Page 4 of 4 )

The a element has readily distinguishable states: a link that has not been visited, a link being clicked on, a link that has been visited in recent history. These states are called pseudo-classes; they work like class selector definitions but don’t have to be labeled as such in their element tags. A pseudo-class always operates as a kind of modifier to another selector. In the following example, notice how the :hover pseudo-class operates on all a elements in one rule, and applies an extra color property to an a element singled out by its ID:

  a {text-decoration: none }
  a:hover {text-decoration: underline}
  #specialA:hover {color: red}

The classness of a pseudo-class is not always based on an element’s state. Document tree context, page position (right or left), and even language are examples of the pos sibilities that pseudo-classes afford. For example, the :first-child pseudo-class turns its associated element into a special class (i.e., a class capable of defining its own style propertys) whenever the element is a first child element in a document tree. Thus, the following style rule applies a different font size for every p element that is the first child of any container with the class name section :

  .section > p:first-child {font-size: 110%}

The use here of the > child selector limits the scope of the p:first-child pseudo-class to first children of specific containers. Removing the child selector would cause the rule to apply to any p element that is the first child of any other container.

Table 4-3 provides a summary of pseudo-classes supported by CSS2. Implementation in mainstream browsers is sporadic.

Table 4-3. CSS2 Pseudo-classes

Name IE/Windows IE/Mac Moz/Saf/Op CSS Description
:active 4 4 all 1 An a element being clicked on by the user
:first n/a n/a n/a 2 First page of a document (with @page declaration)
:first-child n/a 5 all 2 Any element that is the first child of another element
:focus n/a 5 all 2 Any element that has focus
:hover 4 4 all 2 An element that has a cursor on top of it (only a elements in IE 4-6 and in IE 7 quirks mode)
:lang(code) n/a 5 n/a 2 An element with the same language code
:left n/a n/a n/a 2 A left-facing page (with @page declaration)
:link 4 4 all 1 An a element that has not yet been visited
:right n/a n/a n/a 2 A right-facing page (with @page declaration)
:visited 4 4 all 1 An a element that has been visited within the browser’s history

CSS3 introduces a large collection of new pseudo-classes, some of which are already implemented in the latest mainstream browsers. The largest group of new selectors allow you to assign style properties to elements that meet very specific contextual criteria, such as every other row of a table, without burdening the HTML markup with lots of class attributes. Some selectors allow style sheets to complement or replace the browser’s default rendering for states, such as a disabled element or a “checked” button. Table 4-4 lists CSS3 selectors as of the latest W3C Working Draft available before going to press.

Table 4-4. CSS3 Pseudo-classes

Name IE Mozilla Safari Opera CSS Description
:checked n/a n/a n/a 9 3 A radio or checkbox button is checked
:disabled n/a n/a n/a 9 3 A focusable element is disabled
:empty n/a 1.0.1 all n/a 3 An element containing no child nodes
:enabled n/a n/a n/a 9 3

A focusable element is enabled

:first-of-type n/a n/a n/a n/a 3 Any element that matches the tag name and is the first child of a parent element
:invalid n/a n/a n/a 9 n/a

A Web Forms 2.0 control element whose value is invalid

:last-child n/a 1.0.1 n/a n/a 3 Any element that is the last child of a parent element
:last-of-type n/a n/a n/a n/a 3 Any element that matches the tag name and is the last child of a parent element 
:not(selector) n/a n/a n/a n/a 3

Elements not matching selector

:nth-child(an+b) n/a n/a n/a n/a 3 Every b th child element in groups of a
:nth-last-child(an+b) n/a n/a n/a n/a 3

Every b th child element counting backwards from the last sibling, in groups of a

:nth-last-of-type(an+b) n/a n/a n/a n/a 3

Every b th child element with the same tag name counting backward from the last sibling, in groups of a

 :nth-of-type(an+b)  n/a n/a n/a n/a 3

Every b th child element with the same tag name in groups of a

 :only-child  n/a n/a n/a n/a 3An element that has no siblings
 :only-of-type  n/a n/a n/a n/a 3An element that has no siblings with the same tag name 
 :root  n/a n/a n/an/a  3The HTML element 

:target

n/a

n/a

n/a

n/a

3

An element contained by an anchor

 

Please check back next week for the continuation of this article.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
DHTML ARTICLES

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials