What is a CSS Descendant Selector?

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "What is a CSS Descendant Selector?" ThoughtCo, Dec. 2, 2016, thoughtco.com/css-descendant-selector-3467057. Kyrnin, Jennifer. (2016, December 2). What is a CSS Descendant Selector? Retrieved from https://www.thoughtco.com/css-descendant-selector-3467057 Kyrnin, Jennifer. "What is a CSS Descendant Selector?" ThoughtCo. https://www.thoughtco.com/css-descendant-selector-3467057 (accessed September 19, 2017).
Descendant selectors
Descendant selectors in CSS.

The structure of an HTML document is similar to a family tree. In your family, you have your parents and others who came before you. These are your ancestors. Children and those who comes after you on that tree are your descendants. HTML works in a similar fashion. Elements that are inside of other elements are their descendants. For example, since nearly every HTML element is inside of <body> tags, they would be a descendant of that <body> elements.

This relationship is important to understand when you start working with CSS and need to target specific elements to apply visual styles.

CSS Descendant Selectors

A CSS descendant selector applies to the elements that are inside another element (or more accurately stated, an element that is a descendant of another element). For example an unordered list has a tag with tags as descendants. Let's use the following HTML as an example:

<ul>
<li><a href="">this is a link</a></li>
</ul>

The LI tags are descendants of the UL tag. The A tag is a descendant of both the LI (child descendant) and UL (grandchild descendant) tags. If you think about think about this using the family tree example, the <ul> would be the parent, the <li> would be that element's child, and the <a> would be the child of the <li> and the grandchild of the <ul>.

So how would you target specific elements in a web page using these descendant selectors?

First you have to define descendant selectors by using two (or more) type selectors separated by spaces.

li a {
  text-decoration: none ;
}

In that example, the styles would only apply to a link element (<a>) that is a descendant of a list-item element (<li>). All other links on the page that are not a descendant of a list item would not get this style.

One important thing to remember is that it doesn't matter how many tags they are in between the tags you may be using in your descendant selector. If the second element is enclosed anywhere within the first element it will be selected as a descendant.

If you want to select all anchors that are descended from ul elements, you would write:

ul a {
  text-decoration: none ;
}

Now these styles will apply to any link that is a descendant of a list item. You could also write this selector

ul li a {
  text-decoration: none ;
}

This is a descendant selector that uses more than two type selectors. In this case, this would apply to links that are inside of as list-item and also inside of an unordered list. 

Using Class Selectors and ID Selectors

The selectors that you're descending from don't have to always be type descendants. For example, imagine you had an area of the site (like a division) with an ID attribute of "billboard". You could set up a descendant selector off of that ID:

#billboard ul {
  background-color: #ccc ;
}

This would style the unordered list that is a descendant of an element with an ID of "billboard". You can do the same for class values.

div.billboard ul {
  background-color: #ccc ;
}

This assumes that the division has a class value of "billboard".  The CSS above would style the <ul> element inside of any division that has this class value.

You can get really heavy handed and verbose with descendant selectors. For example, if you use Dreamweaver to write your HTML code, there is a setting when you add new CSS rules that will auto-create the selector based on the placement of your cursor on that page. What Dreamweaver does in this instances is create a wildly verbose and lengthy descendant selector. That much specificity is not necessary for your CSS to work. What you want to do is find a balance between a descendant selector that is specific enough so that you can drill down to the exact elements you need (without styling ones you do not wish to affect) without having CSS rules that have selectors that are overly large.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 12/2/16