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 CSS Layout Techniques Grid Layout Testing our Grid

Chris Kwong
Chris Kwong
10,266 Points
Posted by Chris Kwong
Chris Kwong
10,266 Points

Class order in html shouldn't matter, but why does it change in this example?

I was following with the lesson and I put the grid classes in different order thinking that it wouldn't make a difference... but it did. I checked with the final code provided and got the same result.

For example, this works as seem in Guil's example

    <header class="main-header">
        <div class="grid-container">        
            <h1 class="grid-2 main-logo"><a href="#">Logo</a></h1>
            <ul class="grid-8 main-nav">
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </div>
    </header>

But, 

    <header class="main-header">
        <div class="grid-container">        
            <h1 class="main-logo grid-2"><a href="#">Logo</a></h1>
            <ul class="main-nav grid-8">
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </div>
    </header>

Doesn't work. I just reversed the class in the html. It shouldn't make a difference, but it does.

Chris Kwong
Chris Kwong
10,266 Points
Chris Kwong
Chris Kwong
10,266 Points

I just figured it out. The attribute selector for the class attribute is not implemented well. Instead of class^= begins with, use class*= contains, then order won't matter

sammalayek
sammalayek
6,743 Points

Had this same problem. Thanks for the post!

EDIT: I'm still getting minor visual difference depending on the order of classes

Antonio Jaramillo
Antonio Jaramillo
15,604 Points

Nice one, Chris!

2 Answers

William Van Dyke
William Van Dyke
1,221 Points
William Van Dyke
William Van Dyke
1,221 Points

This could be due to both classes setting the same property values. Suppose we apply class-a and class-b to the same element. Class-a sets the background to red and class-b sets the color to black. Whichever class is called last will ultimately determine the background.

<div class="class-a class-b"></div> will result in a black background. <div class="class-b class-a"></div> will result in a red background.

simon buysse
simon buysse
9,716 Points
simon buysse
simon buysse
9,716 Points

Thanks Chris Kwong, for posting this question and figuring that out! This was something that bothered me for the past hour :)