I found myself in a confusing situation where using :last-child is affecting how parent classes are being applied.
The task at hand is to style the last element in a list of elements.
However, upon using :last-child, the priority of styles shifts and one of the parent classes stops working, requiring the use of !important to resolve the issue.
I have created a simple demonstration here: http://jsfiddle.net/wC2AX/1/
HTML:
<div class="hover">
<div class="focus_on_last_child" style="background-color:red; width:100px; height:100px">
<div class="attribution">
</div>
</div>
</div>
CSS:
/*this should be applied on hover always*/
.hover:hover .attribution{
background-color: black; /*try adding !important*/
bottom: 0px;
}
/*basic properties*/
.attribution {
height: 60px;
overflow: hidden;
position: absolute;
bottom: -60px;
width: 100px;
}
/*depending on a screen size styles are changed*/
.focus_on_last_child:last-child .attribution { /*try removing :last:child*/
background-color: pink;
bottom: -30px;
}
This example may seem trivial, but the intention is that styles change on hover. However, it only works when either !important is used or :last-child is removed.
Any suggestions are greatly appreciated!