css - これらのボタンを 1 つだけ使用するには、どのコードを使用しますか?

Question

右側のボタンだけを使用したい:

http://cssdeck.com/item/preview/343/css-text-switcher

最初のボタンではなく、そのボタンだけを表示するには、どのコードを使用しますか? すべての子孫セレクターのために苦労しています..

Answer 1

HTML（関連コードのみ）：

<nav>
  <ul>
    <li>
      <a href="#">
        <span>Want to learn more?</span>
        <span>Send us an email :)</span>
      </a>
    </li>
  </ul>
</nav>​

CSS（関連コードのみ）：

ul {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 30px;
    margin: -15px 0 0 -160px;
    list-style: none;
    font: .75em "lucida grande", arial, sans-serif;
}

a {
    position: absolute;
    width: 150px;
    height: 100%;
    text-decoration: none;
}

a span {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 30px;
}

li a {
    overflow: hidden;
    right: 0;
    color: #fff;
}

li span {
    -webkit-transition: top .3s ease-out;
    -moz-transition: top .3s ease-out;
    -o-transition: top .3s ease-out;
    -ms-transition: top .3s ease-out;
    transition: top .3s ease-out;
}

li span:first-child {
    background: #333;
    top: 0;
}

li span + span {
    background: #39f;
    top: 30px;
}

li a:hover span:first-child {
    top: -30px;
}

li a:hover span + span {
    top: 0;
}

JSFiddle </ p>

Answer 2

HTML

<nav>
  <ul>
    <li>
      <a href="#">
        <span>Want to learn more?</span>
        <span>Send us an email :)</span>
      </a>
    </li>
  </ul>
</nav>

CSS

* {
    padding: 0;
    margin: 0;
}

ul {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 30px;
    margin: -15px 0 0 -160px;
    list-style: none;
    font: .75em "lucida grande", arial, sans-serif;
}

a {
    position: absolute;
    width: 150px;
    height: 100%;
    text-decoration: none;
}

a span {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 30px;
}



li a {
    overflow: hidden;
    right: 0;
    color: #fff;
}

li span {
    -webkit-transition: top .3s ease-out;
    -moz-transition: top .3s ease-out;
    -o-transition: top .3s ease-out;
    -ms-transition: top .3s ease-out;
    transition: top .3s ease-out;
}

li span:first-child {
    background: #333;
    top: 0;
}

li span + span {
    background: #39f;
    top: 30px;
}

li a:hover span:first-child {
    top: -30px;
}

li a:hover span + span {
    top: 0;
}

Answer 3

私はこのようにしました：http://cssdeck.com/t/uHhhprW6