Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by James Croxford
James Croxford
12,723 Points

Descendant selectors- are affected elements only via direct ancestors?

Per the Mozilla DN documentation on descendent selectors:

"The descendant combinator — typically represented by a single space ( ) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors."

I presume that these selectors could only work on direct descendants? So if for instance you had:

<div>
   <span>
      <p> </p>
  </span>
</div>

Then putting this in the CSS intending it to be a descendant would not work as P is a direct descendant of span, and only an indirect descendant of div?

div p {
  /* property declarations */
}

Also, is it ever possible to have descendant selectors with three or more selectors?

1 Answer

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

Yeah it is possible to have more than two elements as part of the selector rule, for example:

/* element selector */

div span p {
  /* ... */
}

/* class selector */

.container .box .title {
  /* ... */
}

/* Multiple type selector */

#wrapper .box p {
  /* ... */
}

These are all descendant selectors.

James Croxford
James Croxford
12,723 Points

Thanks for the quick response!

I was considering the first part of my question (whether an element with multiple ancestors could leap-frog when it comes to descendant selectors), and threw this together which seems to suggest it can:

<!DOCTYPE html>
<html>
  <head>
    <title>Tester page</title>
    <link rel="stylesheet" href="css/style.css">
  </head>

  <body>
    <header>
      <span>
        <h1> Testing 1</h1>
      </span>
    </header>

    <main>
      <div>
        <span>
          <p>Testing 2</p>
        </span>
      </div>
    </main>
  </body>
</html>

header h1 {
  color: red;
}

div p {

 color: blue; 
}

So in this case the h1 text prints out red, and the p text prints out blue, even though h1 is effectively the grandchild of header and p the grandchild of div, rather than the direct descendant. Seems to further promote the use of Class and ID attributes for naming elements when it comes to CSS, as using element selectors alone could lead to unintended styling in large webpages with multiple sections?

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

Yes, you can also do what you did here to target the h1 element in a span element within the header element like so:

HTML

<header>
  <span>
    <h1>

CSS

header h1 {
 /* ... */
}

You can obviously, therefore, omit to add this span element in your selector:

CSS

header span h1 {
 /* ... */
}

The second rule here would obviously override the first rule due to higher specificity which is the key here. You can learn about this at the end of the CSS basics course, which goes in detail about the CSS cascading nature.

If you had multiple elements nested in an element that you wanted to style, then it would be best to assign it a class name:

HTML

<header>
  <span class="name">Lake Tahoe</span>
  <span class="title">Journey through the Nevada mountains</span>

Then you wouldn't need to create descendant selectors to target those elements, you can simply target them by class name:

CSS

.name {
  /* ... */
}
.title {
  /* ... */
}

If on the last example you added the parent element such as header, then it would override this rule due to it having higher specificity.