CODEWITHSUNDEEP
css
Yamaha32088
Yamaha32088

Reputation: 4163

Using :after only on certain divs

I am trying to display the | pipe character to separate links on my page. The problem though is that they all have the same class and if I apply it to the class they all get the pipe, which is fine except for the last one. The only way I was able to counteract this is to give the ones I need it applied to an id except its the same id for all of them so its not proper. Another work around is to use all in the same class except for the last one and copy the style into the new class but that seems dumb also. Is there an easy way to do what I am looking for that I am overlooking?

<div id="topNavLinks">
    <div class="topNavLinksButton">Sign In</div>
    <div class="topNavLinksButton" id="after" >My Account</div>
    <div class="topNavLinksButton" id="after" >Wish List</div>
    <div class="topNavLinksButton" id="after" >About Us</div>
    <div class="topNavLinksButton" id="after" >Contact Us</div>
</div>

CSS:

#after:after { 
    content: "|";
    padding: 0 .5em; 
}

Intended output:

Sign In | My Account | Wish List | About Us | Contact Us

Not: 

Sign In | My Account | Wish List | About Us | Contact Us |

Upvotes: 0

Views: 50

Answers (2)

Blender
Blender

Reputation: 298146

Non-unique id attributes are not valid HTML, so your id attribute should really be a class. Also, for usability, you may want to use better elements than nested <div>s for marking up your menu:

<ul id="topNavLinks">
    <li><a href="#">Sign In</a></li>
    <li><a href="#">My Account</a></li>
    <li><a href="#">Wish List</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

Now, you can use the CSS3 :not(:last-child) selector to filter out that last element:

#topNavLinks {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#topNavLinks > li {
    display: inline-block;
}

#topNavLinks > li:not(:last-child):after { 
    content: "|";
    padding: 0 .5em; 
}

Demo: http://jsfiddle.net/tTTdp/

Upvotes: 3

myajouri
myajouri

Reputation: 3114

You could select using: .topNavLinksButton:not(:last-child):after

.topNavLinksButton:not(:last-child):after {
    content: "|";
    padding: 0.5em;
}

Upvotes: 3

Related Questions