Learn Web page technology by example Pseudo class of CSS (pseudo-classes)

Last Update:2017-02-28 Source: Internet

Author: User

Tags define definition valid

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

css| Web page

CSS pseudo classes are used to add special effects to certain selectors.

CSS Pseudo Class (pseudo-classes) instance:

Hyperlinks

This example shows how to add a different color to a hyperlink in a document.

Hyperlink 2
This example shows how to add additional styles to a hyperlink.

: First-child (first child object)
This example shows: the use of first-child pseudo classes.

: lang (language)

This example shows: the use of the Lang pseudo class.

CSS positioning properties (positioning)

Syntax for pseudo-class:

Selector:pseudo-class {Property:value}

CSS classes can also be used in combination with pseudo classes.

Selector.class:pseudo-class {Property:value}

Anchor Pseudo Class

In browsers that support CSS, the different states of a link can be displayed in different ways, including: Active state, access state, not accessed state, and mouse hover state.

a:link{color: #FF0000}     /* unvisited link * a:visited /{color: #00FF00}/  * visited link a:hover /{color: #FF00FF}/   * mouse over link */ a:active {CO Lor: #0000FF}

Hint: In the CSS definition, a:hover must be placed after A:link and a:visited, which is valid.

Hint: In the CSS definition, a:active must be placed after a:hover, which is valid.

Tip: Pseudo-class names are insensitive to capitalization.

Pseudo classes and CSS classes

Pseudo classes can be used in conjunction with CSS classes:

A .red : visited {color: #FF0000}<a class= " red " href= "css_syntax.asp" >css syntax</a>

If the link in the above example is accessed, it will appear in red.

CSS2-: First-child pseudo class

: The First-child pseudo class matches the first child element of another element.

Example 1:

In this example, the selector matches the element in the first child element of the DIV element to P-indents the first paragraph within the DIV element:

div > p:first-child   {   text-indent:25px   }

<div><p>The first paragraph in the Div. This paragraph will be indented. </p>the second paragraph in the <p>div. This paragraph is not indented. </p></div>

The paragraphs in the following HTML will not be matched:

<div>  Header  <p>div first paragraph, but not the first child element in the Div. This paragraph is not indented. </p></div>

 
Example 2:
 
In this example, the selector matches the first child element in the P element to the element of EM-and sets the first EM element in the P element to bold:
 p:first-child em   {   Font-weight:bold   }
 
For example, in the following HTML, EM is the first child element of a paragraph:
 <p><em>Strong </em> Mans.</p>
 
Example 3:
 
In this example, the selector will match the first child element of any element to the element of a-set the Text-decoration property to none:
 a:first-child   {   Text-decoration:none   }
 
For example, the first a element in the following HTML is the first child element in the paragraph, so there is no underline.
 
But the second A is not the first child element of the paragraph, so it is underlined.
 <p> Visit <a href="http://www.w3school.com.cn">W3School</a> Learning css! Visit <a href= "http://www.w3school.com.cn" >W3School</a> learning html! </p>
 
CSS2-: lang pseudo class
 
: The lang pseudo class gives you the ability to define special rules for different languages. In the following example, the Lang class defines the type of quotation mark for the Q element with a property value of No:
 
Pseudo class

browser support :IE Internet Explorer, F: Firefox, N: Netscape.

The number of the "CSS1" column shows which CSS standard defines the pseudo class attribute (or CSS2).


    The 
      
 
     
      
      Pseudo class 
      function 
      IE 
      F 
      N Consortium 
      
      
      : Active 
      To add a style to an element that is activated 
      4 
      1 
      8 
      1 
      
      
      : Focus 
      To add a style to the selected element 
      - 
      - 
      - 
      2 
      
      
      : hover 
      Add a style to an element when the mouse hovers over the element 
      4 
      1 
      7 
      1 
      
      
      : Link 
      To add a special style to a link that has not been visited 
      3 
      1 
      4 
      1 
      
      
      : Visited 
      To add a special style to a link that has been visited 
      3 
      1 
      4 
      1 
      
      
      : First-child 
      Add a special style to the first child element of an element 
       
      1 
      7 
      2 
      
      
      : lang 
      Allows the creator to define the language used in the specified element 
       
      1 
      8 
      2

Pseudo class	function	IE	F	N	Consortium
: Active	To add a style to an element that is activated	4	1	8	1
: Focus	To add a style to the selected element	-	-	-	2
: hover	Add a style to an element when the mouse hovers over the element	4	1	7	1
: Link	To add a special style to a link that has not been visited	3	1	4	1
: Visited	To add a special style to a link that has been visited	3	1	4	1
: First-child	Add a special style to the first child element of an element		1	7	2
: lang	Allows the creator to define the language used in the specified element		1	8	2

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More