CSS Pseudo-classes

CSS/CSS Pseudo-classes

Pseudo-elements and pseudo-classes are special, predefined groupings used in CSS to deal with special situations that do not exist in HTML.

CSS pseudo-class are used to add special effects to some selectors. The syntax of pseudo-classes is: selector: pseudo-class {property: value;}

CSS classes can be used with pseudo-classes: selector.class: pseudo-class {property: value;}

Anchor Pseudo-classes

Link can be displayed in different ways in CSS-supporting browser

a:link{color: #ffff;} /*unvisited link */

a:visited{color: #ffff;} /*visited link */

a:hover{color: #ffff;} /*mouse hover link */

a:active{color: #ffff;} /*selected link */

a:link Must come after a:visited in the CSS definition in order to be effective and a:active must come after a:hover in the CSS definition in order to be effective.

Note: pseudo-class names are not case-sensitive

Pseudo-classes and CSS classes

pseudo-class can be combined with CSS classes.

If the link in the bellow example has been visited, it will be displayed in blue.

a.blue:visited{

      color: blue;

    }

<a class="blue" href="index.html"> Home</a>

CSS- The: first-child Pseudo-class

The first-child pseudo-class matches specified element that is the child of another element.

CSS- The: lang Pseudo-class

The lang pseudo-class allows you to define special rules for different languages.

All CSS Pseudo Classes/Elements

CSS Pseudo-elements

CSS pseudo-elements are used to add special effects to some selectors. The syntax of pseudo-elements:
selector: pseudo-element {property: value;}

CSS classes can be used with pseudo-elements.

selector: class: pseudo-element {property: value;}.

The :first-line pseudo-element

The “first-line” pseudo-element is used to add a special style to the first  line of a text.

Example

p:first-line

{

    color: blue;

    font-variant: small-caps;

}

The “first-line” pseudo-element can only use with block-level elements. The following properties to the “first-line” pseudo-element:

• Font properties
• Color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

The :first-letter pseudo-element

The “first-line” pseudo-element is used to add a special style to the first letter of a text.

Example

p:first-letter

{

    color: blue;

    font-variant: small-caps;

}

The “first-letter” pseudo-element can only use with block-level elements. The following properties to the “first-line” pseudo-element:

• Font properties
• Color properties
• background properties
• margin properties
• padding properties
• border properties
• word-spacing
• Letter-spacing
• text-decoration
• vertical-align (only if “float” is “none”
• text-transform
• line-height
• clear
• float

CSS Pseudo-elements and CSS Classes

The pseudo-elements can be combined with CSS classes

Example

p.article: first-letter

{

    color: blue; 

}

<p class="article">A paragraph with an article</p>

The above example will display the first letter of all paragraph with class=”article” in blue.

Multiple Pseudo-elements

Several pseudo-elements can also be combined.

Example

    p:first-letter

{

    color: blue;

    font-size: x-large;

}

p:first-line

{

    color: red;

    font-size: medium

}

In the above example the first letter of a paragraph will be blue in an x-large font-size. The rest of the first line will be red, and medium font-size.