Is there any exact previous node in css?

Question

I want to find the previous sibling of all my element and changes its color. below is an example:

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

as per the example, i want nodes 2,4,7,9 to be affected by css/sass. We don't have any classes to elements nor can we use any script.

[There is no previous sibling selector in css](https://stackoverflow.com/q/1817792/9718056). Also, it is not semantically correct to write an `ul` inside another `ul`, you should wrap it inside a `li`. — Arkellys, Dec 31 '19 at 07:22
Can you please update our html structure, its too messy without closing `li` tags , and there is no previous selector in pure `css` you need `jS` for that — Awais, Dec 31 '19 at 07:24

score 0 · Answer 1 · answered Dec 31 '19 at 07:43

Like Arkellys already pointed out, there is no actual “previous sibling” selector in CSS/SASS.

But there is an + selector (adjacent sibling combinator). Maybe you could try this because in your example it looks a bit like you want to select the second li for each list.

https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator

ul > li {
  color: black;
}

ul > li + li {
  color: red;
}

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

score -1 · Answer 2 · answered Dec 31 '19 at 08:03

-1

you can Use


ul>li{
    color:black;
    &+li{
        color:red;
    }
    &>&>&{
        color:black;
    }
}

answered Dec 31 '19 at 08:03

MBadrian

409
3
10

Is there any exact previous node in css?

2 Answers2