Pseudo Class / Element problem

HTML & CSS
1

Hi,

im currently tweaking a different designers code, ive come across this

    body.sector .sidebar nav a:link, 
    body.sector .sidebar nav a:visited {
        font-weight:bold;
        font-size:1.15em;
        color:rgb(45,48,121);
        margin:0 10px;
        padding:10px 0;
        border-bottom:1px solid rgb(204,204,204);
        display:block;
        text-decoration:none;
        -webkit-transition: all 0.25s ease-in-out;
        -moz-transition: all 0.25s ease-in-out;
        -o-transition: all 0.25s ease-in-out;
        -ms-transition: all 0.25s ease-in-out;
        transition: all 0.25s ease-in-out;
    }

Basically my problem is that i want to remove the border from the last li (as the css is to style a unordered list.)

so i wrote this

                body.sector .sidebar nav a:link:last-child,
                body.sector .sidebar nav a:visited:last-child
                {
                    border: 0px;  
                }

but all the li’s are affect by it, not just the last one like its meant to… could someone explain what im doing wrong?

2

Visited pseudo class doesn’t allow much to work with in terms of combining pseudo classes. As you acn see from thsi example, hover works but if you change to visited, it won’t work.

<!doctype html>
<html>
<head>
<style>
a{display:block;}
a:last-child:hover{background:blue;}
</style>
</head>
<body>
<div>
<a id="sexy" href="asdf.html">
asdf</a>
<a href="fdsa.html">fdsa</a></div>
</body>
</html>

Been seeing this a lot lately. Just provide a class for the last one and just manually do it :).

3

Hi Ryan,

Thanks for the reply.

i would just provide a class for it but its dynamic content. so all the list items will have the same class.

Although i have figured it out now. the working CSS is

            body.sector .sidebar nav li:last-child a:link,
                body.sector .sidebar nav li:last-child a:visited
                {
                    border: 0px;  
                }

basicaly i added “li” after nav, and moved the :last-child pseudo class

4

That works too :). Glad you were able to figure it out, and thanks for posting the solution (for searchers).

5