CSS Primer for Lightning Developers: Pseudo-classes and Pseudo-elements

While using concrete HTML element type selectors and class selectors will handle most of your styling requirements, it is interesting to understand what we call pseudo-classes and pseudo-elements.

Pseudo-classes and pseudo-elements were introduced in CSS to provide more granularity and flexibility in applying styles in cases where there may not be a specific element in the HTML document to apply them to. They can be thought of fictional tags that can be used to make concrete tags more dynamic.

When pseudo-classes and pseudo-elements were introduced, they both followed the same single-colon notation to separate the selector from the pseudo-class or pseudo element. For example:


selector:pseudo-class {

    property: value;

}

selector:pseudo-element {

    property: value;

}

For the sake of clarity, CSS3 added a double-colon notation to distinguish pseudo-elements from pseudo-classes. For example:


selector:pseudo-class {

    property: value;

}

selector::pseudo-element {

    property: value;

}

The single-colon notation is backward compatible and will continue to work for pseudo-elements, but if you choose to use pseudo-classes and pseudo-elements, using the double-colon notation will remove ambiguity from your style sheets.

Pseudo-classes

Pseudo-classes refer to virtual elements that extend the behavior of concrete HTML elements such as <a> or <div> by applying styling based on various states of the element.

Rule sets with pseudo-classes will look like this:


selector:pseudo-class {

    property: value;

}

You do not have to explicitly reference the pseudo-class names within an element in the HTML document, they will be automatically applied by the browser based on actions taken by the user.

For example, pseudo-classes can be used to:

  • Apply different styling to visited and unvisited links
  • Apply styling to an input field when it is in focus
  • Apply styling when a user hovers the mouse over an element

A common use case for pseudo-classes is to display links differently based on actions taken by the user. This is accomplished by applying pseudo-classes to each of the states of the <a> element.

For example, to apply a style to all unvisited links:


a:link {

    color: red;

}

To apply a style to all visited links:


a:visited {

    color: navy;

}

To apply a style when a user hovers the mouse over a link:


a:hover {

    color: orange;

}

To apply a style to the currently active link:


a:active {

    color: purple;

}

Pseudo-elements

Pseudo-elements enable you to break down an HTML element into more granular parts and apply styling to each of the resulting sub parts.

Rule sets with pseudo-classes will look like this:


selector::pseudo-element {

    property: value;

}

While pseudo-elements are of value to learn about, they go beyond the scope of essential Lightning Component and Application development. We will not get into the details of pseudo-elements here, but some interesting pseudo-elements to read up on include:

  • ::first-line – Selects the first line of an element.
  • ::first-letter – Selects the first letter of an element.
  • ::before – Inserts text before the content of an element.
  • ::after – Inserts text after the content of an element.
Mike Topalovich

Hi, I’m Mike. I help companies like yours do business in new ways with Salesforce.


I am a freelance Salesforce Developer, Architect, and CTO as well as a part time instructor for Salesforce University.


Connect with me today to discuss how I can become a part of your team on an ongoing retainer basis.


Mike Topalovich on EmailMike Topalovich on FlickrMike Topalovich on LinkedinMike Topalovich on RssMike Topalovich on Twitter

Leave a Reply