first-childとlast-child、要素数が1つしかない時

CSS

CSSでドロップダウンメニューみたいなのを作っているとき、一番上と一番下のノードだけを角丸で表現したい。

ul li:last-child a{
  -moz-border-radius: 0 0 5px 5px; /* Firefox */
  -webkit-border-bottom-left-radius: 5px;  /* Safari、Chrome*/
  -webkit-border-bottom-right-radius: 5px; /* Safari、Chrome*/
  border-radius: 0 0 5px 5px; /*Opera,Chrome*/
}

ul li:first-child a{
  -moz-border-radius: 5px 5px 0 0; /* Firefox */
  -webkit-border-top-left-radius: 5px;  /* Safari、Chrome*/
  -webkit-border-top-right-radius: 5px; /* Safari、Chrome*/
  border-radius: 5px 5px 0 0; /*Opera,Chrome*/
}

しかし、これだと子要素が1つだけのときに困る。なぜなら、子要素が1つということは、その要素はfirst-childでもあり、かつlast-childでもあるということだからだ。Safariは両方をうまく理解してくれたようだが、クロームとFirefoxでは、どちらか一つのスタイルの指示しか実行してくれていない。

その際にonly-childという擬似クラスがあるのを発見する。そこで上記のCSS記述の前に、

ul li:only-child a{
  -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.3);
  -moz-border-radius: 5px 5px 5px 5px; /*Firefox*/
  -webkit-border-bottom-left-radius: 5px;  /*Safari,Chrome*/
  -webkit-border-bottom-right-radius: 5px; /*Safari,Chrome*/
  -webkit-border-top-left-radius: 5px;  /*Safari,Chrome*/
  -webkit-border-top-right-radius: 5px; /*Safari,Chrome*/
  border-radius: 5px 5px 5px 5px; /*Opera,Chrome*/
}

を追加する。しかしうまく行かない。子要素が1つしか無い場合、擬似クラスonly-childを使うのは正しい。これは発想は正しいのだが、書く位置が間違っている。CSSは基本、優先度が同じであれば、後に書いてあるもので前の指定を上書きする。上の場合、

  1. ul li:only-child a
  2. ul li:last-child a
  3. ul li:first-child a

の順で並んでいるので、優先順位が同じであるため、最後のfirst-childとして子要素1つのノードが扱われている。並び順を変えて、

ul li:last-child a{
  -moz-border-radius: 0 0 5px 5px; /* Firefox */
  -webkit-border-bottom-left-radius: 5px;  /* Safari、Chrome*/
  -webkit-border-bottom-right-radius: 5px; /* Safari、Chrome*/
  border-radius: 0 0 5px 5px; /*Opera,Chrome*/
}

ul li:first-child a{
  -moz-border-radius: 5px 5px 0 0; /* Firefox */
  -webkit-border-top-left-radius: 5px;  /* Safari、Chrome*/
  -webkit-border-top-right-radius: 5px; /* Safari、Chrome*/
  border-radius: 5px 5px 0 0; /*Opera,Chrome*/
}

ul li:only-child a{
  -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.3);
  -moz-border-radius: 5px 5px 5px 5px; /*Firefox*/
  -webkit-border-bottom-left-radius: 5px;  /*Safari,Chrome*/
  -webkit-border-bottom-right-radius: 5px; /*Safari,Chrome*/
  -webkit-border-top-left-radius: 5px;  /*Safari,Chrome*/
  -webkit-border-top-right-radius: 5px; /*Safari,Chrome*/
  border-radius: 5px 5px 5px 5px; /*Opera,Chrome*/
}

と、

  1. ul li:last-child a
  2. ul li:first-child a
  3. ul li:only-child a

の順に記述することで、

のように子要素が複数でも、1つでも角丸でメニューを表現できる。