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 amseroedd da
amseroedd da
11,021 Points

Problem with the Foundation framework. Is this correct or not?

Hello everyone! After doing the framework course I tried to make a website myself using Foundation. I wanted it to be more customizable so I started to use Sass and Compass in the project.

This is the html:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>

        <link rel="stylesheet" href="stylesheets/app.css" />
        <link rel="stylesheet" href="stylesheets/custom.css" />


    <script src="bower_components/modernizr/modernizr.js"></script>

   <link href='http://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>

  </head>
  <body>
<!--Navigation-->
     <div class="contain-to-grid">
     <nav class="top-bar">
          <ul class="title-area">
       <li class="name">
         <h1><a href="#">Name</a></h1>
           </li>

     <li class="toggle-topbar menu-icon">
    <a href="#"><span>Menu</span></a>
     </li>
      </ul>

    <section class="top-bar-section">
       <ul class="right">
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li> 
          <li><a href="#">Photos</a></li>   
          <li><a href="#">Contact Us</a></li>
    </ul>
    </section>
    </nav>
    </div>  
<!--End Navigation-->           

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

After writing down the html for the top-bar and customizing the _settings.scss a little, I wanted to add a color to my logo text so I created a new custom.css file and tried using this:

h1 a {

color:#e27878;

}

But it didn't work. After inspecting the element I saw that I actually had to use this :

.top-bar .name h1 a {

color:#e27878;

}

And this time it worked.

My questions are: Is it a good practice to have so many descendant classes or not? In this case was there a better way to do it?

Why didnt simply writing h1 a {} work?

Thank you !

1 Answer

Samuel Bastos
Samuel Bastos
9,836 Points
Samuel Bastos
Samuel Bastos
9,836 Points

CSS rules have priorities based on how specific the selectors are. So, the more generic the rule, less priority it'll have. Check here for more info. Hope this help you.