CODEWITHSUNDEEP
htmlcss
mrkd1991
mrkd1991

Reputation: 388

:nth-child not working on anchor tags

I am trying to design a page template with a header, side bar, footer and content section. Everything is fixed except the content section scrolls on overflow.

The header contains a basic navigation bar comprising of an unordered list, four list items and four anchor tags which link to the normal 'home' 'content''about' 'contact' pages.

Each link needs a right border, except the last (4th) one. They are solely to visually separate each one.

Here's the code:

#top-nav {
  background-color: orange;
  height: 68px;
  margin: 0;
  padding: 0;
}

#top-nav ul {
  font-size: 0;
  margin: 0;
  padding: 0;
}

#top-nav li {
  list-style-type: none;
  text-align: center;
  height:68px; /*100%, border     doesn't span full height*/
  margin: 0;
  border-right: 1px solid black;
  padding: 23.5px 95px;
  display: inline-block;
}

#top-nav li:nth-child(4) {
  border-right: none;
}

#top-nav a {
  text-decoration: none;
  color: black;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px;
  display: block;
}
<!--		<PAGE HEADER>		-->
<div id="header">
  <header>

    <!--		<HEADER TITLE>		-->
    <div id="header-title">
      <h1>Page Header</h1>
    </div>
    <!--		</HEADER TITLE>		-->

    <!--		<HEADER NAVBAR>		-->
    <div id="top-nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Content</a> </li>
        <li><a href="#">About</a> </li>
        <li><a href="#">Contact</a> </li>
      </ul>
    </div>
    <!--		</HEADER NAVBAR		-->

  </header>
</div>
<!--		</HEADER>			-->

This code works as expected.

What I want to do is move the styling aspects to the anchor tag.

When I transfer the styles to the anchor tag and change the nth-child to a instead of li, it doesn't work.

I have also tried :last-child, but it has the same outcome, works on li but not on a.

EDIT:

Here's the CSS:

#top-nav {
    background-color:orange;
    height:68px;
    margin:0;
    padding:0;
} 

#top-nav ul {
    font-size:0;
    margin:0;
    padding:0;
} 

#top-nav li {
    list-style-type:none;
    text-align:center;
    height:68px; /*100%, border     doesn't span full height*/
    margin:0;
/*  border-right:1px solid black;*/
/*  padding:23.5px 95px;*/
display:inline-block;
} 

#top-nav a {
    text-decoration:none;
    color:black;
    height:100%;
    margin:0;
    border-right:1px solid black;
    padding:23.5px 95px;
    font-size:16px;
    display:block;


#top-nav a:nth-child(4) {
    border-right:none;
}

Any help will be greatly appreciated.

Upvotes: 1

Views: 1982

Answers (1)

T30
T30

Reputation: 12222

I think that'll be enough to add the a selector to the rule that already works for you:

#top-nav li:nth-child(4) a{
  border-right: none;
}

The nth-child selector works for siblings tags, so it's correct to use it on the li tags. Adding the a selector, you're saying that you want to style the a tag contained in the 4th li.

CSS style is applied to the last selector. The previous ones work as context (or containers).

Upvotes: 3

Related Questions