CODEWITHSUNDEEP
htmlcsssass
Fernando Souza
Fernando Souza

Reputation: 1779

Assign image before li, using loop with SASS

I want to assign 2 kinds of pictures before a li element, writing SASS. Instead of using nth-child() for each, or 2 different classes, I wonder if there is a smarter way, like a for loop.

Here is the css:

.class1:before {
    content: url('../images/image1.png');
}
.class2:before {
    content: url('../images/image2.png');
}

Here is the html:

<ul>
    <li class="class1">text</li>
    <li class="class2">text</li>
    <li class="class1">text</li>
    <li class="class2">text</li>
    <li class="class1">text</li>
    <li class="class2">text</li>
    <li class="class1">text</li>
    <li class="class2">text</li>
    <li class="class1">text</li>
    <li class="class2">text</li>
    <li class="class1">text</li>
</ul>

Upvotes: 1

Views: 356

Answers (1)

Vaxo Basilidze
Vaxo Basilidze

Reputation: 1057

You can use nth-child()'s odd and even selectors like this:

ul li:nth-child(odd) {
    content: url('../images/image1.png');
}
ul li:nth-child(even) {
    content: url('../images/image2.png');
}

EDIT: You can use :before selector with :nth-child() as well. Try this:

ul li:nth-child(odd):before {
    content: url('../images/image1.png');
}
ul li:nth-child(even)::before {
    content: url('../images/image2.png');
}

Upvotes: 2

Related Questions