:last-child selector isn't working for me

StackOverflow https://stackoverflow.com/questions/23623824

  •  21-07-2023
  •  | 
  •  

문제

I've been having trouble while working on a new layout for my personal site. While adding navigation to my footer I decided to add a divider after each link. Except I wanted to get rid of the divider for link at the end of my list; but the last-child css selector hasn't been working. Though I'm not sure what could be causing the problem. If anyone can help me it would be appreciated.

Here's my html code:

<! DOCTYPE>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../scripts/javascript/responsive_drop_down.js"></script>
    <link href="../css/main_stylesheet.css" rel="stylesheet" type="text/css" media="screen"/>
    <link href="../css/print_stylesheet.css" rel="stylesheet" type="text/css" media="print"/>
</head>

<body>
    <div id="wrapper">
        <header>
            <h1>This is a placeholder <br />
                for header</h1>
        </header>

        <nav class="nm">
            <div class="mobilmenu"></div>
            <div class="mobile-container">
                <ul>
                    <li class="white"><a href="#">Home</a></li>
                    <li class="red"><a href="#">Video</a></li>
                    <li class="purple"><a href="#">Pictures</a></li>
                    <li class="blue"><a href="#">Audio</a></li>
                    <li class="green"><a href="#">Other Work</a></li>
                    <li class="yellow"><a href="#">About Me</a></li>
                    <li class="gray"><a href="#">Contact Me</a></li>
                </ul>
            </div>    
        </nav>

        <div class="sidebar">
            <aside>
                <h3>More Content to come soon.</h3>
            </aside>
        </div>

        <article class="container">
            <section>
                <h1>Heading goes here...</h1>
                <time datetime="#">Time will go here.</time>
                <p>Content will go here...</p>
            </section>
        </article>

        <div class="footer-position">
            <footer>
                <span class="copyright">All rights reserved 2014.</span>

                <nav class="nf">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Video</a></li>
                        <li><a href="#">Pictures</a></li>
                        <li><a href="#">Audio</a></li>
                        <li><a href="#">Other Work</a></li>
                        <li><a href="#">About Me</a></li>
                        <li><a href="#">Contact Me</a></li>
                    </ul>
                </nav>
            </footer>
        </div>    
    </div>
</body>

Here's my CSS code as well:

@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,300italic,400italic);
@font-face 
{
    font-family: 'bebas_neueregular';
    src: url('../font/BebasNeue/bebasneue-webfont.eot');
    src: url('../font/BebasNeue/bebasneue-webfont.eot?#iefix') format('embedded-opentype'), 
         url('../font/BebasNeue/bebasneue-webfont.woff') format('woff'), 
         url('../font/BebasNeue/bebasneue-webfont.ttf') format('truetype'), 
         url('../font/BebasNeue/bebasneue-webfont.svg#bebas_neueregular') format('svg'), 
         url('../font/BebasNeue/BebasNeu.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}  

body
{
    font-family: 'Ubuntu', sans-serif;
    width:100%;
    min-height:auto;
    margin:0;
    padding:0;
    background-color:#84888B;
}

#wrapper
{
    width:100%;
    min-height:auto;
    margin:0;
    padding:0;
}

header
{
    font-family:'bebas_neueregular', sans-serif;
    margin:0 auto;
    background-color:#5D0660;
    color:#E21208;
    text-align:center;
    padding:15px;
}

nav
{
    font-family:'bebas_neueregular', sans-serif;
    text-align:center;
    margin:0;
    padding:0;
}

nav ul
{
    list-style:none;
}

nav ul li
{
    display:inline-block;
}

nav ul li a
{
    display:block;
    text-decoration:none;
}

nav.nm
{
    width:100%;
    background-color:#000000;
    font-size:135%;
}

nav.nm ul
{
    margin-top:0;
}

nav.nm ul li a
{
    color:#ffffff;
    padding:15px 16px;
}

nav.nm ul li.white a:hover
{
    background-color:#ffffff;
    color:#000000;
    transition:450ms ease;
    -webkit-transition:450ms ease;
    -moz-transition:450ms ease;
}

nav.nm ul li.red a:hover
{
    background-color:#E21208;
    color:#000000;
    transition:450ms ease;
    -webkit-transition:450ms ease;
    -moz-transition:450ms ease;
}

nav.nm ul li.purple a:hover
{
    background-color:#9E00A3;
    color:#000000;
    transition:450ms ease;
    -webkit-transition:450ms ease;
    -moz-transition:450ms ease;
}

nav.nm ul li.blue a:hover
{
    background-color:#1A297F;
    color:#000000;
    transition:450ms ease;
    -webkit-transition:450ms ease;
    -moz-transition:450ms ease;
}

nav.nm ul li.green a:hover
{
    background-color:#319032;
    color:#000000;
    transition:450ms ease;
    -webkit-transition:450ms ease;
    -moz-transition:450ms ease;
}

nav.nm ul li.yellow a:hover
{
    background-color:#E1E13D;
    color:#000000;
    transition:450ms ease;
    -webkit-transition:450ms ease;
    -moz-transition:450ms ease;
}

nav.nm ul li.gray a:hover
{
    background-color:#84888B;
    color:#000000;
    transition:450ms ease;
    -webkit-transition:450ms ease;
    -moz-transition:450ms ease;
}

nav.nf
{
    font-size:85%;
}

nav.nf ul li:last-child 
{
    border-right:none;
}

nav.nf ul li a
{
    color:#000000;
    padding:2px 6px;
    border-right:1px solid #000000;
}

nav.nf ul li a:hover
{
    color:#ffffff;
}
도움이 되었습니까?

해결책

Your li:last-child selector refers to the li element, not its a element. Since there isn't a right border on the li element itself to override, that ruleset has no effect.

You need to make sure you select the a within that li:last-child since the right border is declared on a in your following ruleset:

nav.nf ul li:last-child a
{
border-right:none;
}

Also, your DOCTYPE appears to be malformed; it should be <!DOCTYPE html>. There must not be a space after the !, and the html identifier must be there.

On an unrelated note, it's worth pointing out that you do not have to declare the same transitions on each of your nav.nm ul li<class> a:hover rules. You can just declare it on the general nav.nm ul li a rule and the transition will take effect when any of the links are hovered. And the unprefixed transition property should come last:

nav.nm ul li a
{
color:#ffffff;
padding:15px 16px;
-webkit-transition:450ms ease;
-moz-transition:450ms ease;
transition:450ms ease;
}

nav.nm ul li.white a:hover
{
background-color:#ffffff;
color:#000000;
}

nav.nm ul li.red a:hover
{
/* ... */
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top