CSS Pseudo-class (pseudo-classes)

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)