web-dev-qa-db-ja.com

css：nth-​​child（）：after

:nth-child()とafterを混在させることはできますか？

を持っています <ol>アイテムのテキストを追加したい:after。これは正常に機能しますが、1番目、2番目、3番目の項目と4番目、5番目、6番目の項目に異なるテキストを追加したいと思います。

次のコードでは、すべてのliの後にピンク色の「大」が付いています。

これは私には意味がありませんが、私はこれに慣れていないnth-child malarky。

data.html

<ol id="id" class="ui-sortable">
    <li>
        <p>Bacon</p>
    </li>
    <li>
        <p>Bacon</p>
    </li>
    <li>
        <p>Bacon</p>
    </li>

    <!.. repeats -->

    <li>
        <p>Bacon</p>
    </li>
</ol>

pretty.css

#id li p:after {
    float: right;
    content: 'nom';
}

#id li p:nth-child(1):after,
#id li p:nth-child(2):after,
#id li p:nth-child(3):after {
    content: 'OM';
    color: pink;
}

#id li p:nth-child(4):after,
#id li p:nth-child(5):after,
#id li p:nth-child(6):after {
    content: 'Nom';
    color: blue;
}

これは単なる「素敵な」機能なので、jsでこれを実行したくないのです。

私は新しいブラウザしか心配していないので、oldIEなどの回避策は必要ありません。

htmlcsscss3css-selectors
23
rockingskier

できますが、間違っています。

すべてのp要素がliの中にあるという問題。したがって、それらはすべてliコンテナーの最初の子です。

li要素に_nth-child_を配置する必要があります。

_#id li:nth-child(1) p:after,
#id li:nth-child(2) p:after,
#id li:nth-child(3) p:after {
    content: 'OM';
    color: pink;
}

#id li:nth-child(4) p:after,
#id li:nth-child(5) p:after,
#id li:nth-child(6) p:after {
    content: 'Nom';
    color: blue;
}
_

引用 W3Cドキュメント

:nth-child(an+b)疑似クラス表記は、nの任意の正の整数またはゼロ値に対して、ドキュメントツリー内でその前に+/b-1 兄弟を持つ要素を表します 、および親要素があります。

1 /を更新

また、これを使用してこれを簡素化することができます

_#id li:nth-child(-n+3) p:after {
    content: 'OM';
    color: pink;
}

#id li:nth-last-child(-n+3) p:after { /*this means last 3*/
    content: 'Nom';
    color: blue;
}
_

http://jsfiddle.net/gaby/4H4AS/2/ のデモ

Update 2

最初の6つだけを異なるものにしたい場合（最初の3と最後の3ではない）

_#id li:nth-child(-n+6) p:after { /*this means first 6*/
    content: 'Nom';
    color: blue;
}

#id li:nth-child(-n+3) p:after {/*this means first 3 and since it comes second it has precedence over the previous for the common elements*/
    content: 'OM';
    color: pink;
}
_

http://jsfiddle.net/gaby/4H4AS/3/ のデモ

30
Gabriele Petrioli

次のように実行する必要があります。

#id li:nth-child(1) p:after,
#id li:nth-child(2) p:after,
#id li:nth-child(3) p:after {
    content: 'OM';
    color: pink;
}
#id li:nth-child(4) p:after,
#id li:nth-child(5) p:after,
#id li:nth-child(6) p:after {
    content: 'Nom';
    color: blue;
}

JS Fiddle。

... as <p>は常に、表示されたHTML構造の<li>の最初の子です。

ただし、最初のスタイル定義のcontent: 'nom';ルールが上書きされたことに注意してください（ただし、 'float'ルールが有効でした）。これは、 '：after'擬似要素のカスケード規則と同じです。 ）

7
raina77ow