It is a new week, and this week began a new series - how to use CSS3 pseudo-class .
Pseudo-classes (pseudo class), for most Web designers, it is a weakness. Often have pseudo-class produce all kinds of confusion about pseudo-classes, if used properly, can achieve a multiplier effect. In the latest CSS3 standards, it lists 16 kinds of pseudo-classes, provides a powerful method of selecting a new standard for us.
First is to tell you about the historical origins of the CSS pseudo-classes now.
A Brief History of pseudo-class
CSS1 standard was completed in 1996, it includes a number of pseudo-classes until today almost every day use. For example:
: Link
: visited
: hover
: Active
These states can be used in any element, but usually used , since then it is called using this pseudo-class. You must imagine, these still early in the development of HTML4 standard, and is HTML4 was released in December 1997.
CSS2 come
CSS2 CSS1 keep up the pace, and was released in 1998 after two years in May. With pseudo-class exciting position appear together there:
: First-Child
: lang () large column how to use CSS3 pseudo-class (a)
- : lang
There are many ways to represent the language files in HTML5, it can be defined. When your site is different from country to country with the dynamic transformation of language, now you can use: lang (en). - : first-child
you may have used this selection method. Usually used to add or remove a border of the first element in the list of the (border), but in CSS2 and did not correspond to this: last-child, until CSS3 these two brothers was able to meet.
Why use pseudo-class
pseudo-class style can make your content dynamically changes, which makes one of the reasons is so useful. In the tag, when the user interaction with the links can have different display state. The new pseudo-classes can document content based on its location or status dynamically transformed form.
In CSS Proposed Recommendation , the total introduces 16 new pseudo-classes, divided into four categories: structural pseudo-classes, UI element states pseudo-classes, pseudo-class goal, negation pseudo-class.
This is regarded as the series begins now, until the next time I introduced one by one in detail these 16 new pseudo-classes, so stay tuned.