Wednesday, 2 October 2013

Targeting the last list item

Targeting the last list item

<ul id="nav-items" class="links">
<li><a
href="http://www.thevoiceofjeremydonahue.com/about">About</a></li>
<li><a
href="http://www.thevoiceofjeremydonahue.com/projects">Projects</a></li>
<li><a
href="http://www.thevoiceofjeremydonahue.com/contact">Contact</a></li>
</ul>
I am working with this unordered list that you see above. Ultimately I'm
trying to target the last list item "Contact" in order to style it
slightly different than the rest. Now to be very specific this is how my
css looks so far for this particular list:
#nav-items {
border: 2px solid white;
background: rgb(255, 75, 0);
border-radius: 10% 10% 80% 80%;
position: absolute;
top: 10px;
right: 10px;
margin-right: 1px;
font-family: 'Libre Baskerville', serif;
font-size: 40px;
}
#nav-items > li {
margin-bottom: 60px;
margin-right: 58px;
margin-top: 40px;
text-align: center;
background: black;
padding: 15px;
border: 2px solid white;
}
#nav-items > li a:hover {
color: white;
border-radius: 50%; /*This one (border-radius) isn't working either*/
}
Now, in order to target the last one my first choice was to go for
a[href$="contact"] {
property: "value";
}
but that didn't work...so I tried
#nav-items:last-child {
property: "value";
}
I've even tried
ul li a {property: "value"}
that didn't work, and on top of that I wouldn't have wanted to do it that
way anyway because I have other anchors inside of list items elsewhere on
the page that I don't want affected
I've also tried all of the other substring matching attribute selectors ~,
^, *...and none of those worked either...
I've tried
#nav-items > li a {property: "value"}
nothing...
there's probably a couple things that I've tried that I can't remember...
essentially I'm trying to affect the border-radius of the very last list item
I've even validated both my HTML and CSS just to be sure
I've got nothing...you?

No comments:

Post a Comment