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 Unused CSS Stages Media Queries Print Style Sheets

tony abat
tony abat
8,321 Points
Posted by tony abat
tony abat
8,321 Points

Can you please explain why you used this CSS to display the nav and why .main-nav a:first-child matters in this example

.main-nav a, .main-nav a:first-child { display: inline-block; margin: 0 .2em; padding: .35em 1em; border-radius: 8px; } from the class -Media Queries - print-style-sheets I have taken the previous classes but wonder why it was used to display the nav this way.

thanks,

Christian Lawrence
Christian Lawrence
3,941 Points
Christian Lawrence
Christian Lawrence
3,941 Points

Can you please provide the HTML & CSS, using the markdown cheat sheet so it displays correctly.

I'm assuming the first-child has some sort of emphasis or icon associated with it.

1 Answer

tony abat
tony abat
8,321 Points
tony abat
tony abat
8,321 Points

I found that there was another CSS stylesheet associated with it, The main CSS file called "page.css" and "style.css" which is used for the @media screen adjustments. The actual class I was taking is about the @media print query. i noticed the CSS and wondered why did he it in this way and why he used the :first child and :lastchild in both pages of CSS.

here is all the code concerning the header/Nav

thanks,

<header class="main-header">
        <div class="inner">
            <a class="logo" href="home.html"></a>
            <nav class="main-nav">
                <a href="#">My Link 1</a>
                <a href="#">My Link 2</a>
                <a href="#">My Link 3</a>
                <a href="#">My Link 4</a>
            </nav>
        </div>
    </header>```


```page.css

.main-header .inner {
    margin: auto;
    width: 90%;
}
.main-header {
    margin-bottom: 1.5em;
    border-top: 8px solid #2C3E50; 
    background: #3C5269;
}
.logo, 
.main-nav a {
    display: block;
    color: #FFF;
    text-decoration: none;
}
.logo::before {
    display: inline-block;
    margin: -4px 0 10px 0;
    padding: .4em .8em;
    border-radius: 5px;
    background: #3498DB;
    color: #FFF;
    content: "\e001";
    font-weight: normal;
    font-style: normal;
    font-size: 2em;
    font-family: "icomoon";
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.main-nav {
    margin-top: 10px;
}
.main-nav a {
    margin-top: 1px;
    padding: .6em .8em;
    background: #2B3C4E;
    color: rgba(255,255,255, .8);
}
.main-nav a:first-child {
    border-radius: 8px 8px 0 0;
}
.main-nav a:last-child {
    margin-right: 0;
    border-right: none;
}```

```style.css

@media screen and (min-width: 769px) {
    .main-header {
        padding: 35px 0 25px;
    }
    .main-header .inner {
        padding-left: 2.4%;
    }
    .logo {
        float: left;
    }
    .main-nav {
        float: right; 
    }
    .main-nav a, 
    .main-nav a:first-child {
        display: inline-block;
        margin: 0 .2em;
        padding: .35em 1em;
        border-radius: 8px;
    }```