CSS Selectors - Part 2
- The Universal Selector
The universal selector is an asterisk. When used alone, the universal selector tells the CSS interpreter to apply the CSS rule to all elements in the document. The following code shows what a universal selector looks like.
* {font-family: Arial, Helvetica,sans-serif;}
This rule is applied to all elements contained in the document. The universal selector applies to everything, including form input fi elds and tables of data. It applies style to any and every element present in a document. In this case all elements would have font-family: Arial, Helvetica,sans-serif;
applied to them. You probably won’t use the universal selector very often because, there are better ways of applying styles to the whole document.
- Descendant Selectors
In CSS, descendant means an element that is a child, grandchild, great grandchild, and so on, of another element. Descendant selectors apply style based on whether one element contains another.
Descendant selectors are used to select an element based on its context within the document. In the preceding code, you select a <h2> element but only if the <h2> element is a descendant of the <div> element with a class of planet. Descendant selectors aren’t limited to just two elements; you can include more elements in the ancestral lineage, if it suits your needs. Each selector in a descendant selector chain must be separated by a space. This is demonstrated in the following code.
div.planet table td {padding: 0 10px 0 0;text-align: left;}
In fact, the entire lineage from the eldest ancestor, the <html> element, down through the generations to the element you want to select, can be included in a descendant selector chain.
- Pseudo-Classes
Pseudo-classes are used to represent dynamic events, a change in state, or a more general condition present in the document that is not easily accomplished through other means. This may be the user’s mouse rolling over or clicking on an element. In more general terms, pseudo-classes style a specific state present in the target element, for example, a previously visited hyperlink. Pseudo-classes allow the author the freedom to dictate how the element should appear under different conditions. There are many more pseudo-classes than are listed here. Unlike normal classes, pseudo-classes have a single colon before the pseudo-class property.
-- Dynamic Pseudo-Classes
The following are considered dynamic pseudo-classes. They are a classifi cation of elements only present after certain user actions have or have not occurred:
+ :link: Signifies unvisited hyperlinks
+ :visited: Indicates visited hyperlinks
+ :hover: Signifies an element that currently has the user’s mouse pointer hovering over it
+ :focus: Signifies an element that currently has focus, for example if the user has used their keyboard to navigate to a link
+ :active: Signifies an element on which the user is currently clicking
If you want to apply styles to an anchor regardless of its state you can, of course, still use the good old type selector without a pseudo class.
--# :link and :visited
The :link pseudo-class refers to an unvisited hyperlink, whereas :visited, of course, refers to visited hyperlinks. These two pseudo-classes are used to separate styles based on user actions. An unvisited hyperlink may be blue, whereas a visited hyperlink may be purple. Those are the default styles your browser applies. Using dynamic pseudo-classes it is possible to customize those styles. In the following code, unvisited links are styled with the :link dynamic pseudo-class. They receive medium blue text. Visited links, on the other hand, have magenta text.
There is one exception to this, however. Webkit browsers will apply :link pseudo class styles to all links, not just unvisited ones. Therefore it is a good idea to defi ne the same properties in :link and :visited rules so that the correct styles are applied.For obvious reasons, the :link and :visited pseudo-classes apply only to <a> elements.
The order in which dynamic pseudo-classes appear in the style sheet is important and has to do with the cascade. If the :link pseudo-class is defi ned after the :focus pseudo-class in the style sheet, the :link pseudo-class takes precedence: The declarations with the :link pseudo-class override those defi ned for the :focus pseudo-class.
--# :hover and :focus
The :hover pseudo-class refers to an element over which the user’s mouse pointer is currently hovering. While the user’s mouse pointer is over the element, the specifi ed style is applied; when the user’s mouse pointer leaves the element, it returns to the previously specifi ed style. The :focus pseudo-class behaves in the same way, but for keyboard focus. To provide the same experience to keyboard and mouse users, it is good practice to include them both and is common for them to receive the same style.
The :hover and :focus pseudo-classes are applied in the same way that the :link and :visited pseudo-classes are applied. I like to put :focus fi rst as it stops me forgetting it. An example appears in the following code. When the user either hovers over the <a> element with their mouse or uses the keyboard to navigate to it, this code causes the text within the <a> element to be underlined.
In IE 6, the :hover pseudo-class applies only to hyperlinks (which is incorrect under the CSS 2 specification), whereas other browsers recognize the :hover pseudo-class on any rendered element, per the CSS 2 specifi cation. This problem is fixed in IE 7 and later.
--# :active
The :active pseudo-class refers to an element that the user is currently clicking and holding down the mouse button on. The specifi ed style remains in place while the user holds down the mouse button, and the element does not return to its original state until the user releases the mouse button. The following code shows the :active pseudo-class in use. When the user clicks an <a> element, while the mouse button is held down, and before it is released, the element is said to be active, in which case the styles in the :active pseudo-class rule are applied. In IE 6 and IE 7, :active applies only to hyperlinks; whereas, other browsers allow it to be applied to any element.
Read Again :
CSS Selectors - Part 1
0 comments:
Post a Comment