CSS Primer for Lightning Developers: CSS Selector Basics

Every rule set begins with a selector. Selectors are pattern matching rules that specify the HTML elements that a style will be applied to.

Selectors can match elements by their type, ID, class, attribute, or other contextual pattern. If an HTML element meets all of the conditions of a selector pattern, the selector matches the HTML element and the corresponding styling is applied to it.

Type Selector

The type selector is the most basic selector. A type selector will match all of the corresponding element types in an HTML document. To use a type selector, simply specify an HTML element type such as p, h1, or div.

For example, the following rule contains a type selector and will match all <p> elements in an HTML document:


p {

    font-size : 12pt;

}

Note that even though many aspects of Lightning development are case sensitive, element type names are case insensitive in HTML documents.

ID Selector

The ID selector is one of the most specific selector types, as it is used to apply styling to individual elements within a document. An ID selector will match the HTML element with the corresponding ID assigned to it.

Although the use of ID selectors is not a generally used pattern in Lightning development, it is worth pointing out as a common CSS practice.

To use an ID selector, prepend a hashtag (#) to the HTML element ID that the styling should be applied to.

For example, if a <p> element has an ID of mikan12:


<p id="mikan12">Apply styling to this element!</p>

You would use the #mikan12 selector to apply styling:


#mikan12 {

    font-size: large;

}

Because the ID selector is intended to match to a single HTML element, it is important to ensure that the ID is unique within an HTML document.

Class Selector

The class selector is one of the most flexible ways to apply CSS styling to HTML documents, and is the pattern that we will use most often in Lightning development.

A class selector matches HTML elements that contain a class attribute defined with a specific value.

To use a class selector, prepend a period (.) to the class name that the styling should be applied to.

For example, to apply styling to a <p> element with a class attribute defined with the value of “goblue”:


<p class="goblue">This text should be blue!</p>

You would use the .goblue selector to apply styling:


.goblue {

    color: blue;

}

You can make class selectors more granular by referencing specific HTML element types that should be matched by the selector. This will apply styling only to the specified element types that have the class attribute defined with the name of the class selector.

For example, if you define a class selector with a name of “largetext,” and you only want to apply it to <span> elements:


span.largetext {

    font-size: large;

}

The styling would be applied to this element:


<span class="largetext">This text should be large!</span>

But it would not be applied to this element:


<p class="largetext">Hey, wait a minute! Why am I still small?</span>

Another way in which class selectors provide flexibility is in the way multiple classes can be applied to the same element.

To apply multiple class selectors to a single HTML element, simply reference each of the class selector names in the class attribute of the element separated by a space, in left-to-right order from least restrictive to most restrictive.

For example, to apply three classes to a <div> element, one named “center,” one named “indent,” and one named “tolowercase,” we would define the selectors in our CSS style sheet:


.center {

    text-align: center;

}

.indent {

    text-indent: 4em;

}

.tolowercase {

    text-transform: lowercase;

}

Then we would apply the classes to the HTML element:


<div class="center indent tolowercase">

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