CSS Pseudo-class (pseudo-classes)

Source: Internet
Author: User

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

CSS Pseudo-class (pseudo-classes) instances:
Hypertext links
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 Hyperlinks.
Hyperlinks-: Use of focus
This example shows how to apply to Hyperlinks: Focus Pseudo-class (not working in IE).
: First-child (first Sub-object)
This example demonstrates the use of First-child Pseudo-classes.
: lang (language)
This example shows the use of the Lang pseudo-class.
Grammar

Syntax for pseudo-classes:

Selector:pseudo-class {property:value}

CSS classes can also be used in conjunction with Pseudo-classes.

Selector.class:pseudo-class {property:value}
Anchor Pseudo-class

In CSS-enabled browsers, the different states of a link can be displayed in different ways, including: active, accessed, not accessed, and Mouseover.

a:link{color: #FF0000}/* link * a:visited /{color: #00FF00}/* visited * a:hover /{color: #FF00FF}/* mouse move to link * a:active /{color: #0000FF}/* Selected Link */

Try it yourself.

Tip: in CSS definitions, a:hover must be placed after A:link and a:visited to be valid.

Hint: in the CSS definition, a:active must be placed after a:hover to be valid.

Tip: the Pseudo-class name is not case Sensitive.

Pseudo-class 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 example above is accessed, it will appear in Red.

CSS2-: First-child Pseudo-class

You can use the: first-child pseudo-class to select the first child element of an Element. This particular pseudo-class is easily misunderstood, so it is necessary to give an example. Consider the following markup:

<div> <p>These are the necessary steps:</p> <ul> <li>Intert Key</li> <strong>clockwise</strong> <em>not</em> Push the brake at the same time as the accelerator.</p></div>

In the example above, the elements as the first element include the first p, the first Li and the strong, and the EM element.

Given the following rules:

P:first-child {font-weight:bold;} Li:first-child {text-transform:uppercase;}

The first rule is set to bold as all p elements of the first child element of an Element. The second rule will be capitalized as an element (in HTML, which is definitely OL or UL Element) for all LI elements of the first child Element.

Please visit this link to view this: the effect of the First-child instance.

Tip: The most common mistake is to assume that a selector such as P:first-child chooses the first child element of the P Element.

Note: <! must be declared doctype>, so: First-child can be effective in IE.

To give you a more thorough understanding of the First-child pseudo-class, we provide 3 additional examples:

Example 1-match the first <p> element

In the following example, the selector matches the P element as the first child element of any element:

p:first-child {  color:red;  } </style><p>some text</p> <p>some text</p></body>

Tiy

Example 2-matches the first <i> element in all <p> elements

In the following example, the selector matches the first <i> element in all <p> elements:

p > i:first-child {  font-weight:bold;  <i>text</i> <i>text</i> . some <i> Text</i>.</p></body>

Tiy

Example 3-match all <i> elements in the <p> element as the first child element

In the following example, the selector matches all of the <i> elements in the <p> element as the first child element of the Element:

p:first-child i {  color:blue;  <i>text</i> <i>text</i> . </p><p>some <i>text</i>. Some <i>text</i>.</p></body>

Tiy

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 marks for the Q element with a property value of No:

q:lang(no)   {   quotes: "~" "~"   } lang="no" > References in paragraphs </q> text </p></body> 
Pseudo class

The "CSS1" column indicates which CSS version of the property is defined (or CSS2).

Properties Description CSS
: Active Adds a style to the element being Activated. 1
: Focus Adds a style to an element that has keyboard input focus. 2
: hover Adds a style to an element when the mouse hovers over it. 1
: Link Adds a style to a link that is not visited. 1
: Visited Adds a style to the link that has been visited. 1
: First-child Adds a style to the first child element of an Element. 2
: lang Adds a style to the element with the specified Lang Property. 2

CSS pseudo-elements (pseudo-elements)
    • CSS Pseudo-class
    • CSS Alignment

CSS pseudo-elements are used to set special effects to certain selectors.

Grammar

Syntax for pseudo-elements:

Selector:pseudo-element {property:value;}

CSS classes can also be used in conjunction with Pseudo-elements:

Selector.class:pseudo-element {property:value;}
: First-line pseudo-element

The "first-line" pseudo-element is used to set a special style to the first line of Text.

In the following example, the browser formats the first line of text of the P element according to the styles in the "first-line" pseudo-element:

Instance
P:first-line  {  color: #ff0000;  font-variant:small-caps;  }

Try it yourself.

Note: the "first-line" pseudo-element can only be used for Block-level Elements.

Note: The following properties can be applied to the "first-line" pseudo-element:

    • Font
    • Color
    • Background
    • Word-spacing
    • Letter-spacing
    • Text-decoration
    • Vertical-align
    • Text-transform
    • Line-height
    • Clear
: First-letter pseudo-element

The "first-letter" pseudo-element is used to set a special style to the first letter of the Text:

P:first-letter  {  color: #ff0000;  font-size:xx-large;  }

Try it yourself.

Note: the "first-letter" pseudo-element can only be used for Block-level Elements.

Note: The following properties can be applied to the "first-letter" pseudo-element:

    • Font
    • Color
    • Background
    • Margin
    • Padding
    • Border
    • Text-decoration
    • Vertical-align (only when float is none)
    • Text-transform
    • Line-height
    • Float
    • Clear
Pseudo-elements and CSS classes

Pseudo-elements can be used in conjunction with CSS Classes:

p.article:first-letter  {  color: #FF0000;  class= "article" >this is a paragraph in an article. </p>

The above example turns the first letter of all paragraphs of class article red.

Multiple pseudo-elements

Can be used in conjunction with multiple Pseudo-elements.

In the following example, the first letter of the paragraph is shown in red and its font size is Xx-large. The remaining text in the first line will be blue and displayed in small caps. The rest of the text in the paragraph is displayed with the default font size and color:

P:first-letter  {  color: #ff0000;  font-size:xx-large;  } P:first-line  {  color: #0000ff;  font-variant:small-caps;  }

Try it yourself.

CSS2-: before pseudo element

": before" pseudo-element can insert new content in front of the content of the Element.

The following example inserts a picture in front of each

H1:before  {  content:url (logo.gif);  }

Try it yourself.

CSS2-: after pseudo element

The ": after" pseudo-element can insert new content after the Element's contents.

The following example inserts a picture after each

H1:after  {  content:url (logo.gif);  }

Try it yourself.

Pseudo element

The "CSS1" column indicates which CSS version of the property is defined (or CSS2).

Properties Description CSS
: First-letter Adds a special style to the first letter of the Text. 1
: First-line Adds a special style to the first line of Text. 1
: Before Add content before the Element. 2
: After Add content after the Element. 2

CSS Pseudo-class (pseudo-classes)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.