Descendent selectors

Hello Miguel, how are you? That's quite an interesting question. I'd like to try and explain it as much as I can, without introducing an additional confusion, though it's would be a really long post since that's a really important css concept. Let's see...

Descendant selectors are used (as you may already now) to style a particular HTML element, only if it's a descendant of another HTML element. So it's like a conditional; if an element is a descendant of another element, set the following styles. Meaning if we were to style all of the span tags that are inside of a paragraph we could write our css selector as follows:

p span {
    /* css declartions goes here */
}

Now, this is the most basic example, there are a whole lot more to it. So for example if we have the HTML structure as following:

<header>
    <h1 id="logo">My Website</h1>
    <p>Hello and welcome to <span>My Website</span></p>

    <nav>
        <ul>
            <li><a>Home</a></li>
            <li><a>Portfolio</a></li>
            <li><a>Contact</a></li>
        </ul>
    </nav>
</header>

We could select and apply certain styling to the li (list item) HTML elements from above, with descendant selectors as follows:

/* Example No.1 */
header li {
    /* css declartions goes here */
}

/* Example No.2 */
nav li {
    /* css declartions goes here */

}

Now the only difference is that for example, if you have 2 navigations on your webpage (one of course, as shown in the html above in your header and another one in your footer, or perhaps on your sidebar) you'll be styling li elements in both navigations if you were to apply css selector from a css rule used in Example No.2, because it's less specific. Well that is, if both of your header and footer navigations are wrapped with nav tags.

However, the css selector used in css rule below the Example No.1 comment, will only affect the navigation items (list items) that are found in the header.

Now, when speaking about the descendant selectors there's a particular selector called 'direct descendant' selector. It is more specific than the ussual descendant selector, as it name applies, the element we'd like to target with a css rule needs to be a DIRECT child of another html element. Doing the same from the above example (targeting the li elements), but now with a direct descendant selector, the rewritten code would like like this:

/* Example No.1 */
header > nav > ul > li {
    /* css declartions goes here */
}

/* Example No.2 */
nav > ul > li {
    /* css declartions goes here */

}

Notice the " > " - greater than sign? That implies that the selector used is a direct descendant selector. It will only select an element that is a direct child of a specific element, so that's why both codes needed another element selector included to form a proper direct descendant selector.

The main difference between the descendant (including direct descendant) selectors and the ID/class selectors is that both Class and ID selectors have a higher specificity. Now what that it means? Let's make another basic markup of our imaginary web page and see how it goes. If the structure of our web page looked like this:

<div class="wrapper">
    <div id="mainContent">
    </div>
</div>

and we used the following css code

div div {
    background-color: red;
}

it would set the background of our second div (that's found inside of an outer div) background to the color RED. (The selector used that applied the style was the descendant selector).

The important thing to remember, when explaining specificity, is a CASCADING nature of css; meaning that 2 css rules with identical css selectors (targeting the same element on a web page) and same properties but different values of the propertie used, will result in the 2nd css rule being applied as it overrides the first one - as it is written towards the bottom of the document (after the first css rule). Let me show it on an example; taking the same markup from above and using the following css code:

div div {
    background-color: red;
}

div div {
    background-color: blue;
}

will now set background of our second div (that's found inside of an outer div) background to the color BLUE. Why? Because both css rules are using the same css selector, meaning they are equal in specificity. (The selector used that applied the style was the descendant selector)

You can look at it from another perspective, for example :

Specificity:
    element selectors (examples: p, span, div, div) are equal to................................001
    class selectors (examples: .wrapper, .right, .btn, .bold) are equal to......................010
    ID selectors (example: #mainContent, #mainHeader, #mainFooter, #gallery) are equal to.......100

    that doesn't mean that the 11 element selectors will equal to 011 and that they will override the class selector!

    Think of it this way; 
        the element selector weights        _ _ 1
        class selector weights              _ 1 _
        ID selector weights                 1 _ _

    2ID selectors and 3 element selectors will weight                    2 _ 3
    16 element selectors used in a css rule with weight                  _ _ 16
    1 id selector 1 class selector 2 element selectors will weight       1 1 2
    etc.

That means, if a css rules have the same weight (aka specificity) the one that will be applied will be the one written towards the bottom, or the latter one. However, if a more specific css selector was used at the top of our stylesheet and the css selector with less specificity was used towards the bottom (targeting the same element from a web page) the css rule applied would be the one with a higher specificity. Once again, form the above example:

div div#mainContent {
    background-color: green;
}

div div {
    background-color: red;
}

div div {
    background-color: blue;
}

will now set background of our second div (that's found inside of an outer div) background to the color GREEN, as it is more specific than the other 2, no matter they were used after it in the css document. (The selector used that applied the style was the ID selector)

As I reckon well, Guil had an amazing explanation of the css selectors and their specificity (including the inline styles aswell!) in one of the courses. I can't remember the exact name of the course, but it's here in the TH Library under the CSS section. You should definitely take a look at that lectures for a more in-depth explanation, as this can be really confusing, but it's one of the core concepts of CSS.

• Update : I think I found it! It's in here http://teamtreehouse.com/library/css-basics under Fundamental Concepts > The Cascade: Specificity and Source Order. If you didn't go through that course, I highly recommend watching all of the lectures from the course.

Best of wishes on your coding journey! Much success