CSS Unused CSS Stages Media Queries Print Style Sheets

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

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

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;
    }```