css - ミドルチャイルド疑似クラス

Question

要素のリストで中間の子を取得するために CSS セレクターを使用する方法はありますか?

リテラルセレクターがないことは知っていますが:middle-child、Javascript に頼らない別の方法はありますか?

Answer 1

エレガントではありませんが、要素の総数の上限と下限がわかっている場合は、力ずくで中央の要素を選択できます。

たとえば、次のルールは、5、7、または 9 個の要素のセットの中央の要素を選択します。

div:nth-child(3):nth-last-child(3) {
  /* The middle element in a set of 5 is the 3rd element */
}

div:nth-child(4):nth-last-child(4) {
  /* The middle element in a set of 7 is the 4th element */
}

div:nth-child(5):nth-last-child(5) {
  /* The middle element in a set of 9 is the 5th element */
}

またはSassで：

@for $i from 3 through 5 {
    div:nth-child(#{$i}):nth-last-child(#{$i}) {
        /* The middle element */
    }
}

Answer 2

次のように、「最初でも最後でもない」アプローチを使用できます。

CSS

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

HTML

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>

JsFiddle を確認する

Answer 3

最初の子でも最後の子でもないすべての要素にスタイルを適用したい場合は、 を使用し:not(:first-child)てスタイルを適用し、 を使用:last-childして最後の要素から「スタイルを取り除く」ことができます。ただし、要素が 3 つ未満の場合はどうなるかを考える必要があります。

Answer 4

試しました:nth-child(#)か？

選択するものに応じて、# を数字に置き換えるだけです。

Answer 5

Javascript は、このクライアント側を実行する唯一の方法です。