Can CSS identify a specific previous node?

Question

Can CSS identify a specific previous node?

I am trying to locate the previous sibling of each of my list items and change its color. Here is an example for reference:

    <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>

In the given scenario, I aim to apply CSS/SASS styles to nodes 2, 4, 7, and 9 without any element classes or scripting capabilities.

html css sass less

Answer 1

Answer №1

Arkellys made a good point by mentioning that there is no direct “previous sibling” selector in CSS/SASS.

However, you can utilize the + selector (adjacent sibling combinator) as an alternative. This might be helpful in your case where you want to target the second li element in 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>

Answer 2

Arkellys made a good point by mentioning that there is no direct “previous sibling” selector in CSS/SASS.

However, you can utilize the + selector (adjacent sibling combinator) as an alternative. This might be helpful in your case where you want to target the second li element in 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>

Answer 3

Answer №2

To apply custom styling, try this code snippet:


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

Answer 4

To apply custom styling, try this code snippet:


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

Can CSS identify a specific previous node?

Answer №1

Answer №2

Similar questions

Unable to load JQuery from a div element

Use Jquery to select the checkbox inside the td element and mark it as

How can I ensure the end of the list is clearly visible?

Is there a way to implement word wrapping in li text without making any changes to its width

Fading text that gradually vanishes depending on the viewport width... with ellipses!

Tips for resolving vertical alignment styling for images of varying sizes within Vue.js transition-group?

Slideshow through each item using Typescript and Angular8

Exploring the benefits of incorporating the vendor folder in website development

Guide to swapping images based on conditions using Angular JS

What is the best way to dynamically update the selected option in a dropdown menu within a Rails application using a variable?

What is the best way to trigger ajax when the user clicks the back button to return to the previous webpage?

Is it possible to globally modify the component reference <dropdown-component> name in Angular during runtime in a dynamic manner?

Navigating through parent folder HTML files from child folder HTML files

Show the text area content in an alert when using Code Mirror

Automatically press the button when the display style is set to block

Every time I try to access my website, all I see is the WordPress installation process page

What is the best way to implement validation in a textarea to restrict the word count to a minimum of 250 and a maximum

Exploring scraping capabilities in Node.js

Why must I handle Access-Control-Allow-Origin issues with XMLHttpRequest() but not with forms?

What is the best way to make a CSS class appear in my javascript using the method I have been using before?