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 Ahmed Mohamed Fouad
Ahmed Mohamed Fouad
11,735 Points

Misunderstanding Part 2

so what's the difference between

.first,.second{
    text-decoration:underline;
}

and

.first, .second{
    text-decoration:underline;
}

and

.first.second{
    text-decoration:underline;
}

you can apply examples on this code as it's a very simple one

index.html:

<!DOCTYPE html>
<html>

<head>
    <title>hello world</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <div class="first second">
        <div>
            how are things ?
        </div>
        <div>
            Find me on Facebook
        </div>
    </div>

</body>

</html>

styles.css:

body{
    text-align:center;
}
.first,.second{
    text-decoration:underline;
}
.first {
    font-style:italic;
}
.second {
    color:yellow;
}

thanks in advance :)

4 Answers

michaelcodes
michaelcodes
5,604 Points

Hi there! so the first 2 lines of code that you have: 

.first,.second{
    text-decoration:underline;
}

.first, .second{
    text-decoration:underline;
}

There is no difference between these, CSS ignores whitespace. They are just a comma separated list saying to apply it to both classes .first and .second. It would be the same as writing out:

.first {
 text-decoration:underline;
} 
.second{
    text-decoration:underline;
}

For the third part of your question, the 

.first.second{
    text-decoration:underline;
}

This would be calling on only elements that contain both classes first and second. For example :

<div class = "first second">
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Mostly true, though CSS doesn't ignore all whitespace, just the ones before and after commas, curly braces, colons, semi-colons and other symbols. In particular, the ones between selectors are important because it could mean a descendant selector.

For example, the code below would select an element with a class of second that is a descendant (child, grandchild, etc) of an element with a class of first:

.first .second{
    text-decoration:underline;
}
Ahmed Mohamed Fouad
Ahmed Mohamed Fouad
11,735 Points

so what about the one with comma like this

.first,.second{
    text-decoration:underline;
}

this would be calling on which elements ? ... what differentiate it from the one with no commas

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Ahmed Mohamed Fouad it is differentiated by the comma itself (as opposed to a space). The comma is effectively an OR. An element with a class of first OR an element with a class of second. It wouldn't matter where in the HTML code they appear.

For instance, with the following HTML code, the selector with the comma would match all of the list items, whereas the one with the space would only match the second within the first (indicated by the comment):

<ul>
    <li class="first">
        First outer list item
        <ul>
            <li class="first">First inner list item</li>
            <li class="second">Second inner list item</li> <!-- this would be the only one selected by .first .second -->
        </ul>
    </li>
    <li class="second">
        Second outer list item
        <ul>
            <li class="first">Another first inner list item</li>
            <li class="second">Another second inner list item</li>            
        </ul>
    </li>
</ul>
Ahmed Mohamed Fouad
Ahmed Mohamed Fouad
11,735 Points
Ahmed Mohamed Fouad
Ahmed Mohamed Fouad
11,735 Points

so what I got from all answers is that (one with space but no comma) like this

.first .second{
    text-decoration:underline;
}

can be called by any tag of .first class that have a descendant (child) .second like that

<div class="first">
<h1 class=second> Hello world </h1>
</div>

and (one with no space & no comma) like this

.first.second{
    text-decoration:underline;
}

can be called by any tag of .first class & .second class both in the same element (must be both not only one) like that

<div class="first second">
<h1> Hello world </h1>
</div>

and (one with comma whether it has space between two classes or not) like this

.first,.second{
    text-decoration:underline;
}

can be called by any tag of .first class only OR .second class only OR both classes like that

<!-- both classes case -->
<div class="first second">
<h1> Hello world </h1>
</div>

<!-- one class case -->
<div class="first">
<h1> Hello world </h1>
</div>

<!-- one class case -->
<div class="second">
<h1> Hello world </h1>
</div>

<!-- one class case with different class exist-->
<div class="first third">
<h1> Hello world </h1>
</div>

thanks lian & Michael for your efforts & I really appreciate your help :)

michaelcodes
michaelcodes
5,604 Points
michaelcodes
michaelcodes
5,604 Points

Good clarifications Iain Simmons, I should have been more specific with what whitespace is ignored, not just in the context of his comma separated list!

michaelcodes
michaelcodes
5,604 Points
michaelcodes
michaelcodes
5,604 Points

That one would be the same as:

.first, .second{
    text-decoration:underline;
}

or

.first,   .second{ /*because the space is after a comma it doesn't matter*/
    text-decoration:underline;
}

or

.first { /*it is equivalent to calling each one of these elements individually (the lists above)*/
    text-decoration:underline;
.second{ 
    text-decoration:underline;
}

Now, the one with no commas (and a space between .first and .second)

.first .second{
    text-decoration:underline;
}

This is a very specific selector. When you put a space between a selector it is saying to only apply it to .second classes which are a descendant of a .first class.