CSS Primer for Lightning Developers: CSS Combinators and Advanced Selectors

You may run into situations where you want to use a simple type selector, but you only want to apply styling to HTML elements that appear in a specific place in your HTML document.

Combinators give you the ability to define relationships between multiple HTML elements, and you can apply styles to elements only when they appear within a specific order in the HTML document tree.

We will discuss four types of combinators:

  • Descendant Selectors
  • Child Selectors
  • General Sibling Selectors
  • Adjacent Sibling Selectors

Descendant Selectors

Descendant selectors allow you to define ancestor-descendent relationships between multiple HTML elements, and you can apply styles to elements only when they appear within a specific order in the HTML document tree.

Descendent selectors apply styling to descendent elements even if the ancestor is not the direct parent of the element. As long as the descendent appears below the ancestor in the same HTML node tree, the contextual selector will apply the styling to the descendent.

Define descendent selectors by specifying the ancestor and descendent, separated by a space:


ancestor descendent {

    property: value;

}

For example, let’s say you have the following rule set defined in your style sheet:


div p {

    font-size: 12pt;

}

Any p element contained anywhere within a div tag will have a 12pt font size applied.

Child Selectors

Child selectors allow you to define direct parent-child relationships between HTML elements, and you can apply styles to the immediate children of an HTML element.

Define child selectors by specifying the parent and child, separated by a greater than symbol (>):


parent > child {

    property: value;

}

For example, let’s say you have the following rule sets defined in your style sheet:


h1 {

    text-transform: capitalize;

}

a {

    color: red;

}

These rules by themselves will capitalize all of the letters in an h1 element, and links will be colored red. But what happens if we want any links contained in h1 elements to be colored black instead?

This is where we would apply a child selector. For example, if we define the following rule set:


h1 > a {

    color: black;

}

General Sibling Selectors

General sibling selectors allow you to apply styles to siblings that share the same parent and follow an element in the HTML document. Siblings in a general sibling selector do not need to be immediately preceded by the element.

Define general sibling selectors by specifying the HTML element and its sibling, separated by a tilde symbol (~):


element ~ sibling {

    property: value;

}

Adjacent Sibling Selectors

Adjacent sibling selectors allow you to apply styles to siblings that share the same parent and immediately follow an element in the HTML document.

Define adjacent sibling selectors by specifying the HTML element and its sibling, separated by a plus symbol (+):


element + sibling {

    property: value;

}

Grouping Selectors

CSS makes it possible to group selectors with similar style definitions to optimize code and improve the maintainability of style sheets.

To group selectors, simply create a single rule set with a comma separated list of selectors and a single declaration block.

For example, if multiple elements share style definitions like this:


h1 {

    text-decoration: underline;

}

h2 {

    text-decoration: underline;

}

h3 {

    text-decoration: underline;

}

You can group them into a single rule set like this:


h1, h2, h3 {

    text-decoration: underline;

}

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