CSS Pseudo-classes

CSS pseudo-classes are used to add special effects to some selectors.
SyntaxThe syntax of pseudo-classes:

selector:pseudo-class {
    property:value;
}

CSS classes can also be used with pseudo-classes:

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

Anchor Pseudo-classes
Links can be displayed in different ways in a CSS-supporting browser

a:link {
    color: #FF0000;
}

a:visited {
    color: #00FF00;
}

a:hover {
    color: #FF00FF;
}
a:active {
    color: #0000FF;
}

These pseudo-classes change how the links are rendered in response to user actions.

  • hover applies when the user places the pointing device over the element but does not select it.
  • active applies when the element is activated such as when a mouse button is clicked.
  • focus applies when the element has keyboard focus.

Example

    a:hover {
        color: red;
    }
    a:active {
        color: gray;
    }
    a:focus {
        color: yellow;
    }

CSS Pseudo-elements
SyntaxThe syntax of pseudo-elements:

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

CSS classes can also 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.
The ::first-line pseudo-element can only be applied to block-level elements
Example

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

The following properties apply to the ::first-line pseudo-element:

  • font properties
  • color properties
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
black porn

Admin has written 171 articles