17

CSS 変数を使っていくつかの実験を試みていますが、これを機能させることも、それに関するドキュメントを見つけることもできませんでした。CSS3 セレクターで CSS var を使用できるかどうかは誰にもわかりませんか?

私がやろうとしていることを説明するために、次の例を作成しました。この例は Chrome のみです。

JSFIDDLE

http://jsfiddle.net/68Rrn/

CSS

:root {
    -webkit-var-count: 5; /* define my var! */
}

li {
    width:100px;
    height:100px;
    background-color:blue;
    display:inline-block;
    list-style:none;
}


ul li:nth-child(4) {
    background-color:red;
}

ul li:nth-child(-webkit-var(count)) { /* I can't get this working, is it even supported? I'm trying to target the 5th element with my var. */
    background-color:black;
}

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
4

1 に答える 1