Combining CSS pseudo classes (hover and last-of-type) on an a element?

Forum Moderators: not2easy

Message Too Old, No Replies

Combining CSS pseudo classes (hover and last-of-type) on an a element?

JAB Creations

6:16 am on Feb 13, 2010 (gmt 0)

I'm trying to figure out how to apply the hover and last-of-type pseudo classes together on a single anchor element selector in CSS and I haven't been able to find any documentation that has led me to creating a working example of it in any browser. Any one know how to do this?

- John

alt131

1:30 am on Feb 14, 2010 (gmt 0)

Hi John, wondering whether you wanted:
# an example of how to "chain" the selectors so they "work" in an understanding browser,
# an example of this combination being used (working) in a way that could obviously be applied to a real-world situation
# an example of this already being used ("working" ) on a live site

My wondering is because:
1. Lack of support means few examples of these selectors being used in working sites.
2. The particular combination is problematic. Semantics usually suggests a sequence of links should probably be contained in some sort of list:
<ul>
<lil><a>Link</a></li>
<lil><a>Link</a></li>
</ul>
... which means only one <a> per list item, so none are "last-of-type" (Well, each is first/last/only/etc - but not what I think was wanted.)

The Css3 Guide [webmasterworld.com] pinned to the top of the forum has examples, but none do what you want. It is difficult to find anything being used in production, and I'd hoped someone from cssinfo might have dropped by.

In the interim this is a draft implementation of links and in page "anchors" I'd consider for the news page of a tiny informal non-profit I do voluntarily. Colours need correcting for accessibility, it's OTT/"kitsch", and the "easter egg" wouldn't be used for critical information, but it's a wet afternoon and these selectors are fun. Hope it helps.

Works as designed in winsafari4, op9.6, ff3.5.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hover and last-of-type</title>
<style type="text/css">
/*Make this look like a real-world news page */
#news {
width: 38em;
border:0.1em solid #eee;
padding:1em;
margin:0 auto;
}

p {
border:0.08em dashed #000;
padding:1em;
width:33em;
margin: 1em auto;
line-height:1.6;
}

ul {
margin:0;
padding:0.2em;
list-style-type:none;
background-color:#eee;
width:7em;
border:0.1em #aaa;
}

li {line-height:1.6em;border-bottom:0.08em dashed #000;}

li:last-of-type {border-bottom:none;}

ul + p {margin-top:2em;}

/*Getting to the purpose */
p a, li a {
text-decoration:none;
padding:0.1em 0.2em;
color:#000;
background-color:#eee;
}

p a:hover, li a:hover {background-color:#aaa;}

p a:last-of-type {
display:block;
width:7em;
position:relative;
left:85%;
color:#fff;
background-color:#000;
text-align:center;
padding:0.2em;
}

/*The example */
p a:last-of-type:hover {
background-color:#eee;
color:#000;
font-weight:bold;
}

/*Because this was too much fun*/
p a[title~="Biography"]:hover::after {
position:absolute;
margin:5px 0 0 10px;
height:80px;
width:80px;
border:0.02em solid #aaa;
text-align:center;
color:#000;
}

p a[title~="Fred's"]:hover::after {
background: #eee url(fred.jpg) 0 30px no-repeat;
content:"Fred";
}

p a[title~="Freda's"]:hover::after {
background: #eee url(freda.jpg) 0 30px no-repeat;
content:"Freda";
}

p:target {border:0.6em solid #eee;}

/*Easter egg */
p:last-of-type:target:hover::after {
display:block;
content:"Still reading? Don't forget to visit the archives!";
font-size:1.2em;
}
</style>
</head>
<body>

<div id="news">
<h2>In the wild ...</h2>
<ul>
<li><a href="#first">Breaking News</a></li>
<li><a href="#last">Oldest</a></li>
<li><a href="example.com/archive">News Archive</a></li>
</ul>

<p id="first">The inside details on <a href="#" title="Fred's Biography">Fred</a>, the <a href="#">team</a> and <a href="#">Project X</a>. (The official report is in <a href="#">Resources</a> and a movie of the formal presentation in <a href="#">Meetings</a>.)
<a href="#" title="The full story">Read More ...</a>
</p>

<p><a href="#" title="Freda's Biography">Freda</a> tells what <i>really </i> happens when you mix one <a href="#" title="Fred's Biography">Fred</a>, two ### and just a little-too-much ### ....
<a href="#" title="The full story">Read More ...</a>
</p>

<p><a href="#" title="Freda's Biography">Freda</a> tells what <i>really </i> happens when you mix one <a href="#" title="Fred's Biography">Fred</a>, two ### and just a little-too-much ### ....
<a href="#" title="The full story">Read More ...</a>
</p>

<p id="last"><a href="#" title="Freda's Biography">Freda's</a> report on <a href="#">January</a> activities in <a href="#">some place</a>.
<a href="#">Read More ...</a>
</p>
</div>

</body>
</html>

JAB Creations

4:44 pm on Feb 28, 2010 (gmt 0)

The answer I figured out was...

#content #profile div.side div:last-of-type a

My work is WAI AAA compliant which means anchors must be contained within something (not directly touching) so all my anchors are usually within a div if they are not nested inside of the text of a paragraph. At first I was trying to select the last anchor and all the anchors were selected however I then realized I could select the last divisible element and then select any anchor inside since any divisible element that has an anchor will only have a single anchor.

Your demo is pretty interesting and you should post it on a blog if you have one. :)

Thanks again.

- John

alt131

9:30 pm on Feb 28, 2010 (gmt 0)

Hi John,

No blog, unfortunately, but thanks for the positive comments. Pleased you got it resolved.

... select the last divisible element and then select any anchor inside since any divisible element that has an anchor will only have a single anchor.

As said, I don't get to use these selectors much, but have found (as you did), they provide an opportunity to really think about the structure of the html and relationships between elements on the page - and that's got to be good for code.

However, I think they have enormous power to create major accessibility/usability issues. The "easter egg" is a good example. I'm starting to view <blink> with fondness - it had limitations these combinations don't ;)

Sometimes insisting on accessibility-compliance can feel like a lonely battle. I hope that's not the case for you, but it is for me, so can I say "thanks so much" for posting an example that harnesses the power of these selectors to target exactly what you need - rather than re-organising the html and using "the obvious" selector.