web-dev-qa-db-ja.com

最初と最後の子ではないCSS3擬似クラス

次のHTMLコードがあります。

<ul>
    <li>number 1</li>
    <li>number 2</li>
    <li>number 3</li>
    <li>number 4</li>
    <li>number 5</li>
    <li>number 6</li>
    <li>number 7</li>
    <li>number 8</li>
    <li>number 9</li>
    <li>number 10</li>
</ul>

たとえば、CSS3擬似クラスを使用して、最初または最後ではないli要素にtomatoのbackground-colorを持たせるにはどうすればよいですか。 :notセレクターを使用できるようです。

css3pseudo-class
22
haind

二通り ：

汎用ルールを設定してから、:first-childおよび:last-childアイテムのルールをオーバーライドできます。これはCSSの長所になります：

 li { background: red; }
 li:first-child, li:last-child { background: white; }

または、:notキーワードを2つを組み合わせて使用​​できます。

li { background: white; }
li:not(:first-child):not(:last-child) { background: red; }

2つのうち、私は個人的に最初のものを好みます-私の意見では、理解し維持するのが簡単です。

43
Nick Andriopoulos

これはペンです http://codepen.io/vendruscolo/pen/AeHtG

2つの:not()疑似クラスを組み合わせる必要があります。

li:not(:first-child):not(:last-child) {
  background: red;
}

MDN documentation ：そこに述べられているように、IE <9ではサポートされていませんが、他のブラウザでは十分にサポートされています。

IE 8のサポートが必要な場合、Javascriptに依存するか、別のクラスを使用して、どの要素が最後の子であるかを示す必要があります。実際、IE 8（以下）:last-child擬似クラスをサポートしていません。

9
Alessandro Vendruscolo