CODEWITHSUNDEEP
paginationcss-selectors
Yannis Dran
Yannis Dran

Reputation: 1529

Targeting generated pagination specifically

I need to target only specific li in an ul but I can't add a Class to solve my issue. I guess there's a way using Javascript, but it would be my last resort. To explain:

<div>
    <ul>
        <li>Start</li>
        <li>Previous</li>
        <li>>1</li> <!--need to target this-->
        <li>2</li> <!--need to target this-->
        <li>3</li> <!--need to target this-->
        <li--in future a new li will be generated--/li>
        <li>Next</li>
        <li>End</li>
    </ul>

This example is only the general idea as my jsFiddle contains more info such as span and classes. http://jsfiddle.net/8aW77/

note: I looked for special and advanced selectors but I couldn't find one that fits my case.

Upvotes: 0

Views: 87

Answers (1)

kunambi
kunambi

Reputation: 772

Preferably you'd assign classes to the elements you do have control over, such as Start, Previous, Next and End. When you've done that, it's easy to style the other elements.

<ul>
    <li class="static">Start</li>
    <li class="static">Previous</li>
    <li>>1</li> <!--need to target this-->
    <li>2</li> <!--need to target this-->
    <li>3</li> <!--need to target this-->
    <li--in future a new li will be generated--/li>
    <li class="static">Next</li>
    <li class="static">End</li>
</ul>

Thus the CSS would look like:

UL LI {
    color: green;
}
UL LI.static {
    color: red;
}

This would be the most straight-forward solution. However, if you can't add those classes to the "static" LI-tags but you know that the DOM-structure will look the same then use CSS such as this:

UL LI {
    color: green;
}
UL LI:first-child,
UL LI:nth-child(2),
UL LI:nth-last-child(2),
UL LI:last-child {
    color: red;
}

Upvotes: 1

Related Questions