CODEWITHSUNDEEP
css
Matthew
Matthew

Reputation: 309

Selector inside a selector (CSS)

I have am running the selector

.element a:after { content: url("...."); }

But what I am wanting to make sure is that it clears the :after on the last of type, and so I want something like this to happen:

.element a:after:last-of-type { content: url("....") } /* Note that I am changing the image to a blank spacer */

How can I do this?

Matt

Upvotes: 2

Views: 482

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241198

Change the order of the pseudo classes/elements. Put :last-of-type before :after:

WORKING EXAMPLE HERE

.element a:last-of-type:after {
    content: url("....");
}

Based on the HTML structure you posted in the comments: (example)

<ul id="breadCrumb">
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">Home</a></li>
</ul>

You would use :last-of-type on the li element:

#breadCrumb li a:after {
    content: url('....');
}

#breadCrumb li:last-of-type a:after {
    content: url("....");
}

Upvotes: 2

Related Questions