How to Use CSS3 pseudo classes

CSS3 is a good thing, but it is also easily confused by her transform and animation (many of which vary with browser vendors) features, forget the most basic selectors that have been added to the Standard Specification. Many powerful new pseudo-class selectors (16 are listed in the latest W3C Specification) enable us to use element selectors within the new standard range.

Before discussing these new CSS3 pseudo classes, let's briefly review these CSS selectors that are often misunderstood in Web applications.

Brief history of pseudo classes

In 1996, when the CSS1 specification was completed, some pseudo-class selectors were included, many of which were used almost every day. For example:

• :link
• :visited
• :hover
• :active

These statuses can be applied to an element, usually"A: pseudo class name". It is incredible that these pseudo classes were widely used before W3C released the HTML4 specification in December 1997.

CSS2 is coming

So CSS2 came. Its recommendation specification was released in May 1998 two years later. It is exciting to add:first-childAnd:lang()New pseudo class.

:lang

There are many methods to represent the document language type. If you use HTML5, you may directly place the statement (specify the local language) after the DOCTYPE declaration ). You can also use:lang(en)Pseudo classes are used to modify page elements, which is very useful for dynamic language changes.

:first-child

You may already use:first-childAttribute. It is usually used to add or delete the upper border of the first element in the list. The strange thing is that there is no:last-childThis pseudo class corresponds to it. Therefore, we cannot wait until the CSS3 standard supports these two sibling pseudo classes.

Why do we use pseudo classes?

The reason why pseudo classes are so practical is that they allow dynamic content styles. For example<a>For example, we can describe how a link is rendered when a user interacts with a link. As we can see, the new pseudo class allows us to dynamically set the style based on the position or status of the element in the document.

16 new pseudo classes have become part of W3C CSS recommendations. They are divided into four groups: Structure pseudo classes, State pseudo classes of UI elements, and a target) A pseudo class and a negative pseudo class.

W3C is the home of CSS

Now let's explore how to use these 16 new pseudo class selectors. I will use the same identifier as W3C to name the CSS class, suchEElement ),nNumber ),sSelector ).

Sample Code

A reference example is provided for most of the new selectors to visually display the code presentation. Here we will refer to a form that applies to the iPhone and uses the CSS3 pseudo class.

Note that most styles in this form can be set using the id and class selector. Even so, you can still use the new pseudo-class needle to make the form icing on the cake. Click here to view the page example

<Form>                                 
  
8 pages in total:
  
Previous Page
  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
Next Page