Saturday, September 5, 2009

Pseudo Class 1

* NOT TO BE CONFUSED WITH PSEUDO ELEMENTS.

Hover
* div:hover {...} would apply the specified CSS rule(s) when the user places their mouse over the div element.

Focus
* a:focus {...} would apply the CSS rule(s) when the object is clicked and it comes into focus, or when you tab to it.

First-child
* li:first-child {...} would apply the CSS rule(s) to only the first element/item in the list.
* NB: It will only match an element if it is the first child of a parent element.

Lang
* This pseudo class is used if we have more than one language on our website.
* :lang(sp) {...} would apply the CSS rule(s) to any Spanish content on the site.
* This would be identified in the HTML by having lang="sp" within the p tag for example.

* THE FOLLOWING PSEUDO-CLASSES ARE FROM CSS3 AND SO MAY NOT BE SUPPORTED BY ALL BROWSERS AS YET.

Last-child
* p:last-child {...} would apply the CSS rule(s) to only the last element, i.e. the last paragraph in the document in this case.

Only-child
* p:only-child {...} would only apply the CSS rule(s) to a div that contained one paragraph for example.

No comments:

Post a Comment