Таргетинг на последний элемент списка

Question

<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> 

Я работая с этим неупорядоченным списком, который вы видите выше. В конечном счете, я пытаюсь настроить таргетинг на последний элемент списка «Контакт», чтобы его стиль немного отличался от остальных. Теперь, чтобы быть очень конкретным, это как мой CSS выглядит так далеко для этого конкретного списка:

#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*/ 
} 

Теперь, чтобы нацеливать последний мой первый выбор был пойти на

a[href$="contact"] { 
    property: "value"; 
} 

но что не работает ... поэтому я попытался

#nav-items:last-child { 
    property: "value"; 
} 

Я даже пытался

ul li a {property: "value"} 

Это не сработало, и, кроме того, я бы не хотел так поступать так, потому что у меня есть другие привязки внутри элементов списка в другом месте на странице, которые я не хочу затрагивать.

Я также попытался все другие совпадения подстроки селекторы атрибутов ~, ^, * ... и ни один из них не работал либо ...

Я попытался

#nav-items > li a {property: "value"} 

ничего ...

, вероятно, есть пара вещей, которые I'v е пытался, что я не могу вспомнить ...

по существу я пытаюсь воздействовать на пограничную-радиус последнего элемента списка

Я даже одобренного как мой HTML и CSS просто чтобы быть уверенным

У меня ничего нет ... вы?

Answer 1

Вы были очень близки ..

Вы должны реально сказать ему, чтобы выбрать последний li, а не последний #nav-item - есть только один.

#nav-items li:last-child { 
    property: "value"; 
} 

jsFiddle demo - это работает ..

Кроме того, вы не хотите #nav-items li a:last-child {} - обратите внимание на a .. как будет выбрать последний a - не последний li. В контексте в любом случае нет никаких элементов a.

Answer 2

Попробуйте с

#nav-items li a:last-child { 
    property: "value"; 
} 

CSS-последнего ребенка проверки селектора, если элемент, который применяется на последний ребенок своего родителя. Вот почему ваш предыдущий код не работает, как ожидалось:

#nav-items:last-child { 
    property: "value"; 
}